Skip to content

Commit

Permalink
Merge pull request #65 from mostafaznv/dev
Browse files Browse the repository at this point in the history
update docs
  • Loading branch information
mostafaznv authored Jul 7, 2023
2 parents 619372a + b8b4af2 commit b56d42d
Show file tree
Hide file tree
Showing 50 changed files with 1,364 additions and 386 deletions.
9 changes: 9 additions & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -1,2 +1,11 @@
# Auto detect text files and perform LF normalization
* text=auto

# Ignore unnecessary files to prevent from installation
/.github export-ignore
/docs export-ignore
/tests export-ignore
.gitattributes export-ignore
.gitignore export-ignore
phpunit.xml export-ignore
README.md export-ignore
6 changes: 0 additions & 6 deletions CHANGELOG.md

This file was deleted.

397 changes: 17 additions & 380 deletions README.md

Large diffs are not rendered by default.

30 changes: 30 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Introduction

[![GitHub license](https://img.shields.io/github/license/mostafaznv/nova-ckeditor?style=flat-square)](https://github.com/mostafaznv/nova-ckeditor/blob/master/LICENSE) [![Packagist Downloads](https://img.shields.io/packagist/dt/mostafaznv/nova-ckeditor?style=flat-square)](https://packagist.org/packages/mostafaznv/nova-ckeditor) [![Latest Version on Packagist](https://img.shields.io/packagist/v/mostafaznv/nova-ckeditor.svg?style=flat-square)](https://packagist.org/packages/mostafaznv/nova-ckeditor)



The **Nova Ckeditor** package combines the power of Laravel Nova with the advanced features of **CKEditor 5**, a modern and versatile text editor. It aims to bring CKEditor 5 integration to Laravel Nova, providing you with an enhanced content creation experience within your Laravel applications.\
With "Nova Ckeditor," you can seamlessly integrate CKEditor 5 into Laravel Nova and unlock advanced text editing capabilities within your Laravel applications. Whether you're building a blog, a content management system, or any other application that requires rich text editing, "Nova Ckeditor" provides the tools and features you need for a seamless content creation experience.

[![Donate](https://mostafaznv.github.io/donate/donate.svg)](https://mostafaznv.github.io/donate)





### Features:

* **CKEditor 5 Integration**: "Nova Ckeditor" seamlessly integrates CKEditor 5 into Laravel Nova, empowering you with a feature-rich and user-friendly text editing solution.
* **Custom Media Plugins**: The package includes custom-written plugins that enhance media handling within the editor. These plugins offer convenient options for embedding and managing media elements like images and videos in your content.
* **Drag & Drop Uploading in Media Picker**: With the drag and drop uploading feature in the media picker, you can conveniently upload media files directly into the editor, saving time and effort.
* **Optimize Images:** "Nova Ckeditor" includes functionality to optimize images, reducing file sizes while maintaining visual quality and improving page load times.
* **Generate Cover for Videos**: Enhance your videos by generating custom covers. "Nova Ckeditor" allows you to generate visually appealing video covers, ensuring an engaging experience for your audience.
* **Snippet Functionality**: "Nova Ckeditor" simplifies the process of inserting code snippets or reusable content blocks into your text. This feature enhances efficiency and consistency by enabling you to quickly add frequently used pieces of code or content.
* **Publishable Stubs**: The package provides publishable stubs, which act as placeholders for content. These stubs offer a foundation for further development or collaboration, making it easier to kickstart your content creation process.
* **Multiple Toolbars**: Enjoy the flexibility of configuring multiple toolbars within the editor. "Nova Ckeditor" allows you to customize the toolbar settings to match your specific requirements, ensuring a tailored editing experience.
* **Localization**: The package supports localization, enabling you to translate the editor interface into different languages. This feature ensures that users worldwide can access the editor in their preferred language.
* **Configurable**: "Nova Ckeditor" offers extensive configuration options, allowing you to adapt the editor to suit your application's needs. Customize various settings such as toolbar placement, enabled features, and more.



59 changes: 59 additions & 0 deletions docs/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# Table of contents

## 🏁 Getting Started

* [Introduction](README.md)
* [Installation](getting-started/installation.md)
* [Support Us](getting-started/support-us.md)
* [License](getting-started/license.md)

## 🚀 Basic Usage

* [Usage](basic-usage/usage.md)
* [Notes](basic-usage/notes.md)

## ⚙ Advanced Usage

* [Customize ImageStorage](advanced-usage/customize-imagestorage.md)
* [Multiple Toolbars](advanced-usage/multiple-toolbars.md)
* [Customize Toolbar Items](advanced-usage/customize-toolbar-items.md)
* [Media Embed](advanced-usage/media-embed.md)
* [CkEditor Field Options](advanced-usage/ckeditor-field-options/README.md)
* [Toolbar](advanced-usage/ckeditor-field-options/toolbar.md)
* [Height](advanced-usage/ckeditor-field-options/height.md)
* [Limit On Index](advanced-usage/ckeditor-field-options/limit-on-index.md)
* [Content Language](advanced-usage/ckeditor-field-options/content-language.md)
* [Text Part Language](advanced-usage/ckeditor-field-options/text-part-language.md)
* [General HTML Support](advanced-usage/ckeditor-field-options/general-html-support.md)
* [Group Items In Overflow Mode](advanced-usage/ckeditor-field-options/group-items-in-overflow-mode.md)
* [Image Browser](advanced-usage/ckeditor-field-options/image-browser.md)
* [Video Browser](advanced-usage/ckeditor-field-options/video-browser.md)
* [Snippets](advanced-usage/ckeditor-field-options/snippets.md)
* [Configuration](advanced-usage/configuration/README.md)
* [Video Model](advanced-usage/configuration/video-model.md)
* [Memory](advanced-usage/configuration/memory.md)
* [Max Image Quality](advanced-usage/configuration/max-image-quality.md)
* [Image Max Width](advanced-usage/configuration/image-max-width.md)
* [Image Max Height](advanced-usage/configuration/image-max-height.md)
* [Image Naming Method](advanced-usage/configuration/image-naming-method.md)
* [Toolbars](advanced-usage/configuration/toolbars/README.md)
* [Defualt Toolbar](advanced-usage/configuration/toolbars/defualt-toolbar.md)
* [Toolbar 1](advanced-usage/configuration/toolbars/toolbar-1/README.md)
* [Height](advanced-usage/configuration/toolbars/toolbar-1/height.md)
* [Items](advanced-usage/configuration/toolbars/toolbar-1/items.md)
* [Options](advanced-usage/configuration/toolbars/toolbar-1/options.md)
* [Content Lang](advanced-usage/configuration/toolbars/toolbar-1/content-lang.md)
* [UI Language](advanced-usage/configuration/toolbars/toolbar-1/ui-language/README.md)
* [UI Language Name](advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-name.md)
* [UI Language Script](advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-script.md)
* [Text Part Language](advanced-usage/configuration/toolbars/toolbar-1/text-part-language.md)
* [General HTML Support](advanced-usage/configuration/toolbars/toolbar-1/general-html-support.md)
* [Group Items In Overflow Mode](advanced-usage/configuration/toolbars/toolbar-1/group-items-in-overflow-mode.md)
* [Image Browser](advanced-usage/configuration/toolbars/toolbar-1/image-browser.md)
* [Video Browser](advanced-usage/configuration/toolbars/toolbar-1/video-browser.md)
* [Snippets](advanced-usage/configuration/toolbars/toolbar-1/snippets.md)

## ⚪ Other

* [Migration](other/migration.md)
* [Credit and Thanks](other/credit-and-thanks.md)
7 changes: 7 additions & 0 deletions docs/advanced-usage/ckeditor-field-options/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# CkEditor Field Options

This section will guide you through the various methods and options available for the <mark style="color:red;">CKEditor</mark> field. You will discover how to customize the toolbar, handle media embedding, enable image uploads, configure localization, and more. Understanding these methods and options will empower you to leverage the full potential of the CKEditor field and tailor it to your specific application requirements.

Let's dive into the comprehensive set of features and functionalities offered by the CKEditor field in the following sections.

\
35 changes: 35 additions & 0 deletions docs/advanced-usage/ckeditor-field-options/content-language.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
description: contentLanguage
---

# Content Language

<table><thead><tr><th>Argument</th><th width="141">Type</th><th width="149" data-type="checkbox">Required</th><th>Default</th></tr></thead><tbody><tr><td>lang</td><td>string</td><td>true</td><td></td></tr></tbody></table>

This method allows you to define the language of the editor's content, enabling you to set the text direction (RTL or LTR) based on your requirements.

By utilizing the `contentLanguage` method, you can specify the language for the content within the CKEditor field. The method accepts an argument called `lang`, which allows you to set the desired language code.



```php
use Mostafaznv\NovaCkEditor\CkEditor;

class Article extends Resource
{
public function fields(Request $request): array
{
return [
CkEditor::make(trans('Content'), 'content')
->contentLanguage('fa')
];
}
}
```

{% hint style="info" %}
In this example, the `contentLanguage` method is used to set the content language of the CKEditor field to Farsi (<mark style="color:red;">`fa`</mark>). This ensures that the text direction is appropriate for Farsi content, which typically follows a right-to-left (RTL) orientation.
{% endhint %}



44 changes: 44 additions & 0 deletions docs/advanced-usage/ckeditor-field-options/general-html-support.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
description: htmlSupport
---

# General HTML Support

<table><thead><tr><th>Argument</th><th width="160">Type</th><th width="161" data-type="checkbox">Required</th><th>Default</th></tr></thead><tbody><tr><td>htmlSupport</td><td>array</td><td>true</td><td></td></tr></tbody></table>

This method allows you to enable <mark style="color:red;">General HTML Support</mark> (GHS) within the editor, providing flexibility to include HTML elements, attributes, classes, and styles that are not supported by other dedicated CKEditor 5 plugins. This ensures that your desired markup, including custom elements, attributes, classes, and styles, remains preserved within the editor window and in the final output.



```php
use Mostafaznv\NovaCkEditor\CkEditor;

class Article extends Resource
{
public function fields(Request $request): array
{
return [
CkEditor::make(trans('Content'), 'content')
->htmlSupport([
'allow' => [
[
'name' => 'div',
'classes' => true,
],
[
'name' => '/^(div|section|article)$/'
]
],

'disallow' => []
]
)
];
}
}
```

{% hint style="info" %}
For more detailed information on using the General HTML Support feature, refer to the [CKEditor 5 documentation on General HTML Support](https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html).
{% endhint %}

Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
description: shouldNotGroupWhenFull
---

# Group Items In Overflow Mode

<table><thead><tr><th>Argument</th><th width="143">Type</th><th width="154" data-type="checkbox">Required</th><th>Default</th></tr></thead><tbody><tr><td>status</td><td>bool</td><td>false</td><td>true</td></tr></tbody></table>

This method allows you to control the behavior of the editor when it reaches the maximum width and enters overflow mode.

By utilizing the `shouldNotGroupWhenFull` method, you can indicate whether the editor should display three dots (<mark style="color:red;">"..."</mark>) in overflow mode or group the toolbar items together. This feature provides control over the appearance and functionality of the toolbar when the editor's width is constrained.

To use this method, pass a boolean value as the `status` argument. Setting `status` to `true` indicates that the toolbar items should not be grouped and the three dots ("...") should not be displayed in overflow mode.



```php
use Mostafaznv\NovaCkEditor\CkEditor;

class Article extends Resource
{
public function fields(Request $request): array
{
return [
CkEditor::make(trans('Content'), 'content')
->shouldNotGroupWhenFull()
];
}
}
```



29 changes: 29 additions & 0 deletions docs/advanced-usage/ckeditor-field-options/height.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
description: height
---

# Height



<table><thead><tr><th>Argument</th><th width="146">Type</th><th width="153" data-type="checkbox">Required</th><th>Default</th></tr></thead><tbody><tr><td>pixels</td><td>int</td><td>true</td><td></td></tr></tbody></table>

This method allows you to specify the desired height of the editor, providing control over the visual display of the CKEditor field. The method accepts a single argument, `pixels`, which allows you to set the height of the editor in pixels.



```php
use Mostafaznv\NovaCkEditor\CkEditor;

class Article extends Resource
{
public function fields(Request $request): array
{
return [
CkEditor::make(trans('Content'), 'content')
->height(500)
];
}
}
```

35 changes: 35 additions & 0 deletions docs/advanced-usage/ckeditor-field-options/image-browser.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
description: imageBrowser
---

# Image Browser

<table><thead><tr><th>Argument</th><th width="140">Type</th><th width="155" data-type="checkbox">Required</th><th>Default</th></tr></thead><tbody><tr><td>enabled</td><td>bool</td><td>false</td><td>true</td></tr></tbody></table>

This method allows you to enable or disable the image picker functionality within the CKEditor field.

By utilizing the `imageBrowser` method, you have control over whether the image picker is enabled or disabled for the CKEditor field. The method accepts a boolean value as the `enabled` argument, where `true` enables the image picker, and `false` disables it.

Enabling the image picker provides a convenient way for users to select and insert images directly into the CKEditor field. This feature streamlines the image insertion process, enhancing the content creation experience. On the other hand, disabling the image picker removes the option for users to select images through the CKEditor field, limiting the content to text-only input.

To utilize the `imageBrowser` method, simply pass `true` or `false` as the `status` argument based on whether you want to enable or disable the image picker, respectively.



```php
use Mostafaznv\NovaCkEditor\CkEditor;

class Article extends Resource
{
public function fields(Request $request): array
{
return [
CkEditor::make(trans('Content'), 'content')
->imageBrowser()
];
}
}
```



33 changes: 33 additions & 0 deletions docs/advanced-usage/ckeditor-field-options/limit-on-index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
description: limitOnIndex
---

# Limit On Index

<table><thead><tr><th>Argument</th><th width="142">Type</th><th data-type="checkbox">Required</th><th>Default</th></tr></thead><tbody><tr><td>limit</td><td>int</td><td>true</td><td>85</td></tr></tbody></table>

By utilizing the `limitOnIndex` method, you can define a maximum character limit that will be enforced when displaying the CKEditor field in the index view of your Laravel Nova resource. This is useful for providing a concise preview or summary of the content without overwhelming the view with excessive text.



```php
use Mostafaznv\NovaCkEditor\CkEditor;

class Article extends Resource
{
public function fields(Request $request): array
{
return [
CkEditor::make(trans('Content'), 'content')
->limitOnIndex(150)
];
}
}
```

{% hint style="info" %}
In this example, the <mark style="color:red;">`limitOnIndex`</mark> method is used to restrict the displayed text to a maximum of 150 characters in the index view. Any content exceeding this limit will be truncated, providing a concise preview of the CKEditor field's content.
{% endhint %}



35 changes: 35 additions & 0 deletions docs/advanced-usage/ckeditor-field-options/snippets.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
description: snippets
---

# Snippets

<table><thead><tr><th>Argument</th><th width="153">Type</th><th width="149" data-type="checkbox">Required</th><th>Default</th></tr></thead><tbody><tr><td>snippets</td><td>array</td><td>true</td><td></td></tr></tbody></table>

This method allows you to set snippet items within the CKEditor field, providing a convenient way to insert predefined content or code snippets into the editor.

By utilizing the `snippets` method, you can define an array of snippet items to be available in the CKEditor field. Each snippet item represents a specific HTML view (blade template) that should be located in the `resources/views/ckeditor` directory of your Laravel application.



```php
use Mostafaznv\NovaCkEditor\CkEditor;

class Article extends Resource
{
public function fields(Request $request): array
{
return [
CkEditor::make(trans('Content'), 'content')
->snippets([
['name' => 'Image', 'html' => 'ckeditor.image'],
['name' => 'Media', 'html' => 'ckeditor.media'],
['name' => 'Table', 'html' => 'ckeditor.table']
])
];
}
}
```



Loading

0 comments on commit b56d42d

Please sign in to comment.