From 96e741f030dcb92c09d88ea7dd15381adb202671 Mon Sep 17 00:00:00 2001 From: Mostafa Zeinivand Date: Thu, 6 Jul 2023 11:38:54 +0000 Subject: [PATCH 1/6] GitBook: No commit message --- docs/README.md | 2 ++ docs/SUMMARY.md | 3 +++ 2 files changed, 5 insertions(+) create mode 100644 docs/README.md create mode 100644 docs/SUMMARY.md diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..5c4b4d5 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,2 @@ +# Page + diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md new file mode 100644 index 0000000..4439a14 --- /dev/null +++ b/docs/SUMMARY.md @@ -0,0 +1,3 @@ +# Table of contents + +* [Page](README.md) From a6f08684523314ab1d0572ec5c242572c309708f Mon Sep 17 00:00:00 2001 From: Mostafa Zeinivand Date: Thu, 6 Jul 2023 23:53:00 +0000 Subject: [PATCH 2/6] GITBOOK-1: change request with no subject merged in GitBook --- docs/README.md | 30 +++- docs/SUMMARY.md | 58 ++++++- .../ckeditor-field-options/README.md | 7 + .../content-language.md | 35 ++++ .../general-html-support.md | 44 +++++ .../group-items-in-overflow-mode.md | 33 ++++ .../ckeditor-field-options/height.md | 29 ++++ .../ckeditor-field-options/image-browser.md | 35 ++++ .../ckeditor-field-options/limit-on-index.md | 33 ++++ .../ckeditor-field-options/snippets.md | 35 ++++ .../text-part-language.md | 34 ++++ .../ckeditor-field-options/toolbar.md | 36 ++++ .../ckeditor-field-options/video-browser.md | 35 ++++ docs/advanced-usage/configuration/README.md | 11 ++ .../configuration/image-max-height.md | 18 ++ .../configuration/image-max-width.md | 18 ++ .../configuration/image-naming-method.md | 28 +++ .../configuration/max-image-quality.md | 18 ++ docs/advanced-usage/configuration/memory.md | 18 ++ .../configuration/toolbars/README.md | 16 ++ .../configuration/toolbars/defualt-toolbar.md | 18 ++ .../toolbars/toolbar-1/README.md | 8 + .../toolbars/toolbar-1/content-lang.md | 20 +++ .../toolbar-1/general-html-support.md | 51 ++++++ .../toolbar-1/group-items-in-overflow-mode.md | 20 +++ .../toolbars/toolbar-1/height.md | 18 ++ .../toolbars/toolbar-1/image-browser.md | 18 ++ .../configuration/toolbars/toolbar-1/items.md | 20 +++ .../toolbars/toolbar-1/options.md | 18 ++ .../toolbars/toolbar-1/snippets.md | 45 +++++ .../toolbars/toolbar-1/text-part-language.md | 37 ++++ .../toolbars/toolbar-1/ui-language/README.md | 10 ++ .../toolbar-1/ui-language/ui-language-name.md | 18 ++ .../ui-language/ui-language-script.md | 42 +++++ .../toolbars/toolbar-1/video-browser.md | 18 ++ .../configuration/video-model.md | 16 ++ docs/advanced-usage/customize-imagestorage.md | 23 +++ .../advanced-usage/customize-toolbar-items.md | 29 ++++ docs/advanced-usage/media-embed.md | 71 ++++++++ docs/advanced-usage/multiple-toolbars.md | 46 +++++ docs/basic-usage/notes.md | 8 + docs/basic-usage/usage.md | 30 ++++ docs/getting-started/installation.md | 163 ++++++++++++++++++ docs/getting-started/license.md | 8 + docs/getting-started/support-us.md | 16 ++ docs/other/credit-and-thanks.md | 3 + docs/other/migration.md | 21 +++ 47 files changed, 1364 insertions(+), 2 deletions(-) create mode 100644 docs/advanced-usage/ckeditor-field-options/README.md create mode 100644 docs/advanced-usage/ckeditor-field-options/content-language.md create mode 100644 docs/advanced-usage/ckeditor-field-options/general-html-support.md create mode 100644 docs/advanced-usage/ckeditor-field-options/group-items-in-overflow-mode.md create mode 100644 docs/advanced-usage/ckeditor-field-options/height.md create mode 100644 docs/advanced-usage/ckeditor-field-options/image-browser.md create mode 100644 docs/advanced-usage/ckeditor-field-options/limit-on-index.md create mode 100644 docs/advanced-usage/ckeditor-field-options/snippets.md create mode 100644 docs/advanced-usage/ckeditor-field-options/text-part-language.md create mode 100644 docs/advanced-usage/ckeditor-field-options/toolbar.md create mode 100644 docs/advanced-usage/ckeditor-field-options/video-browser.md create mode 100644 docs/advanced-usage/configuration/README.md create mode 100644 docs/advanced-usage/configuration/image-max-height.md create mode 100644 docs/advanced-usage/configuration/image-max-width.md create mode 100644 docs/advanced-usage/configuration/image-naming-method.md create mode 100644 docs/advanced-usage/configuration/max-image-quality.md create mode 100644 docs/advanced-usage/configuration/memory.md create mode 100644 docs/advanced-usage/configuration/toolbars/README.md create mode 100644 docs/advanced-usage/configuration/toolbars/defualt-toolbar.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/README.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/content-lang.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/general-html-support.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/group-items-in-overflow-mode.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/height.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/image-browser.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/items.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/options.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/snippets.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/text-part-language.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/README.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-name.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-script.md create mode 100644 docs/advanced-usage/configuration/toolbars/toolbar-1/video-browser.md create mode 100644 docs/advanced-usage/configuration/video-model.md create mode 100644 docs/advanced-usage/customize-imagestorage.md create mode 100644 docs/advanced-usage/customize-toolbar-items.md create mode 100644 docs/advanced-usage/media-embed.md create mode 100644 docs/advanced-usage/multiple-toolbars.md create mode 100644 docs/basic-usage/notes.md create mode 100644 docs/basic-usage/usage.md create mode 100644 docs/getting-started/installation.md create mode 100644 docs/getting-started/license.md create mode 100644 docs/getting-started/support-us.md create mode 100644 docs/other/credit-and-thanks.md create mode 100644 docs/other/migration.md diff --git a/docs/README.md b/docs/README.md index 5c4b4d5..2affbd1 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,2 +1,30 @@ -# Page +# 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. + + diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index 4439a14..3fd1467 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -1,3 +1,59 @@ # Table of contents -* [Page](README.md) +## 🏁 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) diff --git a/docs/advanced-usage/ckeditor-field-options/README.md b/docs/advanced-usage/ckeditor-field-options/README.md new file mode 100644 index 0000000..dbd1481 --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/README.md @@ -0,0 +1,7 @@ +# CkEditor Field Options + +This section will guide you through the various methods and options available for the CKEditor 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. + +\ diff --git a/docs/advanced-usage/ckeditor-field-options/content-language.md b/docs/advanced-usage/ckeditor-field-options/content-language.md new file mode 100644 index 0000000..6cb3262 --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/content-language.md @@ -0,0 +1,35 @@ +--- +description: contentLanguage +--- + +# Content Language + +
ArgumentTypeRequiredDefault
langstringtrue
+ +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 (`fa`). This ensures that the text direction is appropriate for Farsi content, which typically follows a right-to-left (RTL) orientation. +{% endhint %} + + + diff --git a/docs/advanced-usage/ckeditor-field-options/general-html-support.md b/docs/advanced-usage/ckeditor-field-options/general-html-support.md new file mode 100644 index 0000000..4f2d3c3 --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/general-html-support.md @@ -0,0 +1,44 @@ +--- +description: htmlSupport +--- + +# General HTML Support + +
ArgumentTypeRequiredDefault
htmlSupportarraytrue
+ +This method allows you to enable General HTML Support (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 %} + diff --git a/docs/advanced-usage/ckeditor-field-options/group-items-in-overflow-mode.md b/docs/advanced-usage/ckeditor-field-options/group-items-in-overflow-mode.md new file mode 100644 index 0000000..5639b4f --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/group-items-in-overflow-mode.md @@ -0,0 +1,33 @@ +--- +description: shouldNotGroupWhenFull +--- + +# Group Items In Overflow Mode + +
ArgumentTypeRequiredDefault
statusboolfalsetrue
+ +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 ("...") 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() + ]; + } +} +``` + + + diff --git a/docs/advanced-usage/ckeditor-field-options/height.md b/docs/advanced-usage/ckeditor-field-options/height.md new file mode 100644 index 0000000..f296d63 --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/height.md @@ -0,0 +1,29 @@ +--- +description: height +--- + +# Height + + + +
ArgumentTypeRequiredDefault
pixelsinttrue
+ +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) + ]; + } +} +``` + diff --git a/docs/advanced-usage/ckeditor-field-options/image-browser.md b/docs/advanced-usage/ckeditor-field-options/image-browser.md new file mode 100644 index 0000000..6b91d2d --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/image-browser.md @@ -0,0 +1,35 @@ +--- +description: imageBrowser +--- + +# Image Browser + +
ArgumentTypeRequiredDefault
enabledboolfalsetrue
+ +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() + ]; + } +} +``` + + + diff --git a/docs/advanced-usage/ckeditor-field-options/limit-on-index.md b/docs/advanced-usage/ckeditor-field-options/limit-on-index.md new file mode 100644 index 0000000..1fe8ef3 --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/limit-on-index.md @@ -0,0 +1,33 @@ +--- +description: limitOnIndex +--- + +# Limit On Index + +
ArgumentTypeRequiredDefault
limitinttrue85
+ +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 `limitOnIndex` 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 %} + + + diff --git a/docs/advanced-usage/ckeditor-field-options/snippets.md b/docs/advanced-usage/ckeditor-field-options/snippets.md new file mode 100644 index 0000000..d91f11f --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/snippets.md @@ -0,0 +1,35 @@ +--- +description: snippets +--- + +# Snippets + +
ArgumentTypeRequiredDefault
snippetsarraytrue
+ +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'] + ]) + ]; + } +} +``` + + + diff --git a/docs/advanced-usage/ckeditor-field-options/text-part-language.md b/docs/advanced-usage/ckeditor-field-options/text-part-language.md new file mode 100644 index 0000000..18cc7cb --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/text-part-language.md @@ -0,0 +1,34 @@ +--- +description: textPartLanguage +--- + +# Text Part Language + +
ArgumentTypeRequiredDefault
languagesarraytrue
+ +This method enables you to mark the language of selected text fragments, making it convenient to work with multilingual content. It ensures that user agents, such as graphical browsers and screen readers, correctly present and interpret the content written in multiple languages. + +By utilizing the `textPartLanguage` method, you can specify the language for selected text fragments within the CKEditor field. The method accepts an argument called `languages`, which is an array allowing you to provide multiple language codes. + + + +```php +use Mostafaznv\NovaCkEditor\CkEditor; + +class Article extends Resource +{ + public function fields(Request $request): array + { + return [ + CkEditor::make(trans('Content'), 'content') + ->textPartLanguage([ + ['title' => 'Farsi', 'languageCode' => 'fa'], + ['title' => 'English', 'languageCode' => 'en'] + ]) + ]; + } +} +``` + + + diff --git a/docs/advanced-usage/ckeditor-field-options/toolbar.md b/docs/advanced-usage/ckeditor-field-options/toolbar.md new file mode 100644 index 0000000..564378a --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/toolbar.md @@ -0,0 +1,36 @@ +--- +description: toolbar +--- + +# Toolbar + +
ArgumentTypeRequiredDefault
namestringtrue
itemsarrayfalsenull
+ +This method allows you to customize the toolbar configuration within the CKEditor field, providing flexibility in defining the available toolbar options and items and their arrangement. + +It accepts two arguments to facilitate customization. + +The first argument, `name`, is a string that allows you to reference a pre-configured toolbar key from the `config/nova-ckeditor.php` file. This feature enables you to quickly apply a predefined toolbar configuration to the CKEditor field. + +Additionally, the second argument, `items`, is an optional array that empowers you to define custom toolbar items for the current field. By providing an array of toolbar items, you can specify a personalized set of buttons, dropdown menus, and other editing tools to include in the toolbar. This functionality enables you to precisely tailor the toolbar to match your specific needs. + + + +```php +use Mostafaznv\NovaCkEditor\CkEditor; + +class Article extends Resource +{ + public function fields(Request $request): array + { + return [ + CkEditor::make(trans('Content'), 'content') + ->toolbar('toolbar-2', [ + 'textPartLanguage', 'heading', '|', 'fontSize' + ] + ) + ]; + } +} +``` + diff --git a/docs/advanced-usage/ckeditor-field-options/video-browser.md b/docs/advanced-usage/ckeditor-field-options/video-browser.md new file mode 100644 index 0000000..18cba55 --- /dev/null +++ b/docs/advanced-usage/ckeditor-field-options/video-browser.md @@ -0,0 +1,35 @@ +--- +description: videoBrowser +--- + +# Video Browser + +
ArgumentTypeRequiredDefault
enabledboolfalsetrue
+ +This method allows you to enable or disable the video picker functionality within the CKEditor field. + +By utilizing the `videoBrowser` method, you have control over whether the video picker is enabled or disabled for the CKEditor field. The method accepts a boolean value as the `enabled` argument, where `true` enables the video picker, and `false` disables it. + +Enabling the video picker provides a convenient way for users to select and insert videos directly into the CKEditor field. This feature streamlines the video insertion process, enhancing the content creation experience. On the other hand, disabling the video picker removes the option for users to select videos through the CKEditor field, limiting the content to text-only input. + +To utilize the `videoBrowser` method, simply pass `true` or `false` as the `status` argument based on whether you want to enable or disable the video picker, respectively. + + + +```php +use Mostafaznv\NovaCkEditor\CkEditor; + +class Article extends Resource +{ + public function fields(Request $request): array + { + return [ + CkEditor::make(trans('Content'), 'content') + ->videoBrowser() + ]; + } +} +``` + + + diff --git a/docs/advanced-usage/configuration/README.md b/docs/advanced-usage/configuration/README.md new file mode 100644 index 0000000..88d580e --- /dev/null +++ b/docs/advanced-usage/configuration/README.md @@ -0,0 +1,11 @@ +# Configuration + +NovaCkeditor comes with a flexible configuration system that allows you to customize its behavior according to your specific needs. + +To publish the configuration file, you can run the following artisan command: + +```bash +php artisan vendor:publish --provider="Mostafaznv\NovaCkEditor\FieldServiceProvider" +``` + +This will publish the configuration file to the `config/nova-ckeditor.php`, and it contains various options that you can adjust to tailor the package to your requirements. diff --git a/docs/advanced-usage/configuration/image-max-height.md b/docs/advanced-usage/configuration/image-max-height.md new file mode 100644 index 0000000..2ecdfc6 --- /dev/null +++ b/docs/advanced-usage/configuration/image-max-height.md @@ -0,0 +1,18 @@ +--- +description: max-width +--- + +# Image Max Height + +| Property Name | Type | Default | +| ------------- | ---- | ------- | +| max-height | int | 768 | + +The `max-height` configuration option allows you to specify the maximum height for images within the CKEditor field. This setting determines the maximum allowed height for uploaded images and ensures that they are automatically resized if their height exceeds this limit. + +By default, the `max-height` configuration option is set to `768`, indicating a maximum height of 768 pixels. This helps maintain consistency and prevents excessively tall images from affecting the layout and performance of your application. + +To configure the `max-height` option, update the value in the configuration file `config/nova-ckeditor.php` with the desired maximum height value. + + + diff --git a/docs/advanced-usage/configuration/image-max-width.md b/docs/advanced-usage/configuration/image-max-width.md new file mode 100644 index 0000000..3d92dbe --- /dev/null +++ b/docs/advanced-usage/configuration/image-max-width.md @@ -0,0 +1,18 @@ +--- +description: max-width +--- + +# Image Max Width + +| Property Name | Type | Default | +| ------------- | ---- | ------- | +| max-width | int | 1024 | + +The `max-width` configuration option allows you to specify the maximum width for images within the CKEditor field. This setting determines the maximum allowed width for uploaded images and ensures that they are automatically resized if their width exceeds this limit. + +By default, the `max-width` configuration option is set to `1024`, indicating a maximum width of 1024 pixels. This helps maintain consistency and prevents excessively large images from affecting the layout and performance of your application. + +To configure the `max-width` option, update the value in the configuration file `config/nova-ckeditor.php` with the desired maximum width value. + + + diff --git a/docs/advanced-usage/configuration/image-naming-method.md b/docs/advanced-usage/configuration/image-naming-method.md new file mode 100644 index 0000000..84db9d8 --- /dev/null +++ b/docs/advanced-usage/configuration/image-naming-method.md @@ -0,0 +1,28 @@ +--- +description: image-naming-method +--- + +# Image Naming Method + +| Property Name | Type | Default | +| ------------------- | ------ | ------------------------------------------- | +| image-naming-method | string | `hash-file` | + +The `image-naming-method` configuration option allows you to specify the naming method for uploaded images within the CKEditor field. This setting determines how the image files will be named when they are saved to the storage. + +By default, the `image-naming-method` configuration option is set to `hash-file`, which generates a unique hash-based name for each uploaded image file. This helps avoid naming conflicts and ensures uniqueness of the file names. + + + +The available naming methods for the `image-naming-method` configuration option are as follows: + +* `hash-file`: This method generates a unique hash-based name for each uploaded image file. +* `real-file-name`: This method retains the original file name of the uploaded image. +* `unique-real-file-name`: This method retains the original file name but adds a unique identifier to prevent naming conflicts. + +To configure the `image-naming-method` option, update the value in the configuration file `config/nova-ckeditor.php` with the desired naming method. + + + + + diff --git a/docs/advanced-usage/configuration/max-image-quality.md b/docs/advanced-usage/configuration/max-image-quality.md new file mode 100644 index 0000000..1a39985 --- /dev/null +++ b/docs/advanced-usage/configuration/max-image-quality.md @@ -0,0 +1,18 @@ +--- +description: max-quality +--- + +# Max Image Quality + +| Property Name | Type | Default | +| ------------- | ---- | ------- | +| max-quality | int | 75 | + +The `max-quality` configuration option allows you to specify the maximum image output quality for image processing within the CKEditor field. This setting determines the level of compression applied to images when they are processed and resized. + +By default, the `max-quality` configuration option is set to `75`. This value balances image quality and file size. However, you can adjust this value based on your specific requirements and preferences. + +To configure the `max-quality` option, update the value in the configuration file `config/nova-ckeditor.php` with the desired maximum quality level. + + + diff --git a/docs/advanced-usage/configuration/memory.md b/docs/advanced-usage/configuration/memory.md new file mode 100644 index 0000000..11ae87e --- /dev/null +++ b/docs/advanced-usage/configuration/memory.md @@ -0,0 +1,18 @@ +--- +description: video-model +--- + +# Memory + +| Property Name | Type | Default | +| ------------- | ------ | ------- | +| memory | string | 256M | + +The `memory` configuration option allows you to specify the maximum memory for image resizing in the CKEditor field. This setting overrides the default PHP configuration defined in `php.ini` and determines the amount of memory allocated for image resizing operations. + +By default, the `memory` configuration option is set to `256M`, indicating a maximum memory allocation of 256 megabytes. However, you can adjust this value according to the memory requirements of your application and the size of the images you expect to handle. + +To configure the `memory` option, update the value in the configuration file `config/nova-ckeditor.php` with the desired memory limit. + + + diff --git a/docs/advanced-usage/configuration/toolbars/README.md b/docs/advanced-usage/configuration/toolbars/README.md new file mode 100644 index 0000000..927681d --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/README.md @@ -0,0 +1,16 @@ +--- +description: toolbars +--- + +# Toolbars + +The toolbar configuration in the Nova Ckeditor package allows you to define and customize multiple toolbars for the CKEditor field within your Laravel Nova application. Each toolbar consists of various options and items that control the available editing tools and features. + +#### Toolbar Options + +The toolbar configuration is defined in the `config/nova-ckeditor.php` file. Inside this file, you will find a `toolbars` key that contains an array of toolbar options. Each toolbar option represents a specific toolbar. + + + + + diff --git a/docs/advanced-usage/configuration/toolbars/defualt-toolbar.md b/docs/advanced-usage/configuration/toolbars/defualt-toolbar.md new file mode 100644 index 0000000..9316408 --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/defualt-toolbar.md @@ -0,0 +1,18 @@ +--- +description: toolbars.default +--- + +# Defualt Toolbar + +| Property Name | Type | Default | +| ---------------- | ------ | ------------------------------------------- | +| toolbars.default | string | `toolbar-1` | + +The `toolbars.default` configuration option allows you to specify the default toolbar for the CKEditor field. This option determines which toolbar will be used as the initial set of editing tools when the CKEditor field is loaded. + +By default, the `toolbars.default` configuration option is set to `toolbar-1`, indicating that the `toolbar-1` option will be used as the default toolbar. This option assumes that you have defined a `toolbar-1` configuration in the `config/nova-ckeditor.php` file. + +To configure the default toolbar, update the value of `toolbars.default` in the `config/nova-ckeditor.php` file with the desired toolbar option name. + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/README.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/README.md new file mode 100644 index 0000000..c60a850 --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/README.md @@ -0,0 +1,8 @@ +--- +description: toolbars.toolbar-1 +--- + +# Toolbar 1 + +This option allows you to define the options and items for Toolbar 1 within the CKEditor field in the Nova Ckeditor package. This configuration option contains an array that represents the structure and contents of Toolbar 1. + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/content-lang.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/content-lang.md new file mode 100644 index 0000000..621531c --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/content-lang.md @@ -0,0 +1,20 @@ +--- +description: toolbars.toolbar-1.content-lang +--- + +# Content Lang + +| Property Name | Type | Default | +| ------------------------------- | ---------------------------------------------------------- | ------- | +| toolbars.toolbar-1.content-lang | string `format: ISO 639-1` | en | + +This option determines the language used for text rendering and can also affect the text direction (RTL or LTR) within the editor. + +By default, the `toolbars.toolbar-1.content-lang` configuration option is set to "en", indicating English as the default language. However, you can adjust this value to match the desired language code based on the ISO 639-1 format. For example, "en" for English, "fa" for Farsi, "es" for Spanish, and so on. + +To configure the language of the editor's content within Toolbar 1, update the value of `toolbars.toolbar-1.content-lang` in the `config/nova-ckeditor.php` file with the desired language code. + + + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/general-html-support.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/general-html-support.md new file mode 100644 index 0000000..4f60180 --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/general-html-support.md @@ -0,0 +1,51 @@ +--- +description: toolbars.toolbar-1.html-support +--- + +# General HTML Support + +| Property Name | Type | Default | +| ------------------------------- | ----- | ------- | +| toolbars.toolbar-1.html-support | array | | + +This option enables the General HTML Support ("GHS") feature within the toolbar NovaCkeditor field. This feature allows you to enable HTML features that are not supported by any other dedicated CKEditor 5 plugins. + +With the General HTML Support feature, you can add elements, attributes, classes, and styles to the editor's source and ensure that this markup remains preserved in both the editor window and the output. This provides greater flexibility for incorporating custom HTML elements and attributes within your content. + +To configure the General HTML Support feature within Toolbar 1, update the value of `toolbars.toolbar-1.html-support` in the `config/nova-ckeditor.php` file with the desired array of HTML support settings. + +\ +Example: + +```php + [ + 'toolbar-1' => [ + 'html-support' => [ + '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 %} + + + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/group-items-in-overflow-mode.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/group-items-in-overflow-mode.md new file mode 100644 index 0000000..3a3479b --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/group-items-in-overflow-mode.md @@ -0,0 +1,20 @@ +--- +description: toolbars.toolbar-1.should-not-group-when-full +--- + +# Group Items In Overflow Mode + +| Property Name | Type | Default | +| --------------------------------------------- | ---- | ------- | +| toolbars.toolbar-1.should-not-group-when-full | bool | false | + +This option determines whether the editor's toolbar in the toolbar should display three dots (...) in overflow mode when the toolbar is full and cannot accommodate all the items within the available space. + +By default, theis option is set to `false`, indicating that the editor's toolbar will display three dots (...) in overflow mode when necessary. This helps maintain a compact and visually appealing toolbar by grouping less frequently used items under the three-dot menu. + +To disable the grouping of items in overflow mode within Toolbar 1, update the value of `toolbars.toolbar-1.should-not-group-when-full` in the `config/nova-ckeditor.php` file to `true`. + + + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/height.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/height.md new file mode 100644 index 0000000..9bc541e --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/height.md @@ -0,0 +1,18 @@ +--- +description: toolbars.toolbar-1.height +--- + +# Height + +| Property Name | Type | Default | +| ------------------------- | ---- | ------- | +| toolbars.toolbar-1.height | int | 400 | + +The `toolbars.toolbar-1.height` configuration option allows you to specify the height of the CKEditor field within Toolbar 1. This option determines the vertical size of the editor's content area. + +By default, the `toolbars.toolbar-1.height` configuration option is set to `400`, indicating a height of 400 pixels for the CKEditor field within Toolbar 1. However, you can adjust this value based on your specific requirements and the amount of content you expect to be displayed in the editor. + +To configure the height of the CKEditor field within Toolbar 1, update the value of `toolbars.toolbar-1.height` in the `config/nova-ckeditor.php` file with the desired height value. + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/image-browser.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/image-browser.md new file mode 100644 index 0000000..8ddf251 --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/image-browser.md @@ -0,0 +1,18 @@ +--- +description: toolbars.toolbar-1.browser.image +--- + +# Image Browser + +| Property Name | Type | Default | +| -------------------------------- | ---- | ------- | +| toolbars.toolbar-1.browser.image | bool | true | + +This option allows you to enable or disable the image picker within the toolbar. By default, this option is set to `true`, indicating that the image picker is enabled. + +The image picker provides a convenient way to select and insert images into the CKEditor field. However, in some cases, you may want to disable the image picker functionality. + +To disable the image picker within Toolbar 1, update the value of `toolbars.toolbar-1.browser.image` in the `config/nova-ckeditor.php` file to `false`. + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/items.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/items.md new file mode 100644 index 0000000..b48b145 --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/items.md @@ -0,0 +1,20 @@ +--- +description: toolbars.toolbar-1.items +--- + +# Items + +| Property Name | Type | Default | +| ------------------------ | ----- | ------- | +| toolbars.toolbar-1.items | array | | + +This option allows you to define the toolbar buttons within the toolbar. This option provides flexibility to remove or rearrange the toolbar buttons according to your specific requirements. + +By default, NovaCkeditor comes with a set of predefined buttons. However, you can customize the toolbar items by modifying the `toolbars.toolbar-1.items` configuration option. You can remove buttons that you don't need or rearrange their order as desired. + +To customize the toolbar buttons within Toolbar 1, update the value of `toolbars.toolbar-1.items` in the `config/nova-ckeditor.php` file with the desired array of button items. + + + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/options.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/options.md new file mode 100644 index 0000000..3191a52 --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/options.md @@ -0,0 +1,18 @@ +--- +description: toolbars.toolbar-1.options +--- + +# Options + +| Property Name | Type | Default | +| -------------------------- | ----- | ------- | +| toolbars.toolbar-1.options | array | | + +This option allows you to customize the options of the toolbar items withinthe toolbar. This option provides the ability to configure various settings for each toolbar. + +To customize the options of toolbar items within Toolbar 1, update the value of `toolbars.toolbar-1.options` in the `config/nova-ckeditor.php` file with the desired array of options. + + + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/snippets.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/snippets.md new file mode 100644 index 0000000..3cd8b9d --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/snippets.md @@ -0,0 +1,45 @@ +--- +description: toolbars.toolbar-1.snippets +--- + +# Snippets + +| Property Name | Type | Default | +| --------------------------- | ----- | ------- | +| toolbars.toolbar-1.snippets | array | | + +This option allows you to define and customize the snippets available within the toolbar. Snippets are pre-defined content blocks that can be easily inserted into the CKEditor field. + +By default, there are some pre-defined snippets located in the `resources/views/ckeditor` directory. However, you can add more snippets as needed by specifying them in the `toolbars.toolbar-1.snippets` configuration option. + + + +To add and customize snippets within Toolbar 1, update the value of `toolbars.toolbar-1.snippets` in the `config/nova-ckeditor.php` file with the desired array of snippet items. + +\ +Example: + +```php + [ + 'toolbar-1' => [ + 'snippets' => [ + ['name' => 'Image', 'html' => 'ckeditor.image'], + ['name' => 'Media', 'html' => 'ckeditor.media'], + ['name' => 'Table', 'html' => 'ckeditor.table'] + ] + ], + ] +]; +``` + +{% hint style="info" %} +It's important to note that snippets will only render CKEditor elements. Standard HTML or figures such as tables, images, and videos. For more information on using standard HTML or figures, refer to the [CKEditor documentation](https://ckeditor.com/docs). +{% endhint %} + + + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/text-part-language.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/text-part-language.md new file mode 100644 index 0000000..7351248 --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/text-part-language.md @@ -0,0 +1,37 @@ +--- +description: toolbars.toolbar-1.text-part-language +--- + +# Text Part Language + +| Property Name | Type | Default | +| ------------------------------------- | ----- | ------- | +| toolbars.toolbar-1.text-part-language | array | en, fa | + +This feature enables the ability to mark the language of selected text fragments, making it convenient to work with multilingual content. + +By default, theis option is set to fa and en, indicating that Persian (Farsi) and English are the supported languages for the text part language feature within the toolbar. You can adjust this array to include additional language codes as needed. + +To configure the supported languages for the text part language feature within Toolbar 1, update the value of `toolbars.toolbar-1.text-part-language` in the `config/nova-ckeditor.php` file with the desired language codes. + +Example: + +```php + [ + 'toolbar-1' => [ + 'text-part-language' => [ + ['title' => 'Farsi', 'languageCode' => 'fa'], + ['title' => 'English', 'languageCode' => 'en'] + ], + ], + ] +]; +``` + + + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/README.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/README.md new file mode 100644 index 0000000..0bac850 --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/README.md @@ -0,0 +1,10 @@ +--- +description: toolbars.toolbar-1.ui-language +--- + +# UI Language + +The `ui-language` configuration option allows you to specify the language of the CKEditor's user interface (UI) in the Nova Ckeditor package. This option determines the language used for labels, tooltips, and other UI elements within the editor. + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-name.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-name.md new file mode 100644 index 0000000..3d6fb0b --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-name.md @@ -0,0 +1,18 @@ +--- +description: toolbars.toolbar-1.ui-language.name +--- + +# UI Language Name + +| Property Name | Type | Default | +| ----------------------------------- | ---------------------------------------------------------- | ------- | +| toolbars.toolbar-1.ui-language.name | string `format: ISO 639-1` | en | + +The `toolbars.toolbar-1.ui-language.name` configuration option allows you to specify the language of the CKEditor's user interface (UI) within Toolbar 1 in the Nova Ckeditor package. This option determines the language used for labels, tooltips, and other UI elements specific to Toolbar 1. + +By default, the `toolbars.toolbar-1.ui-language.name` configuration option is set to "en", indicating English as the default language for the CKEditor UI within Toolbar 1. However, you can adjust this value to match the desired language code based on the ISO 639-1 format. For example, "en" for English, "fa" for Farsi, "es" for Spanish, and so on. + +To configure the language of the CKEditor's UI within Toolbar 1, update the value of `toolbars.toolbar-1.ui-language.name` in the `config/nova-ckeditor.php` file with the desired language code. + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-script.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-script.md new file mode 100644 index 0000000..12f72a0 --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-script.md @@ -0,0 +1,42 @@ +--- +description: toolbars.toolbar-1.ui-language.script +--- + +# UI Language Script + +| Property Name | Type | Default | +| ------------------------------------- | ------ | ------- | +| toolbars.toolbar-1.ui-language.script | string | null | + +This option allows you to specify the URL of the language file to be used for the CKEditor's user interface (UI) within Toolbar in the NovaCkeditor field. This option provides the ability to load a language-specific JavaScript file that contains translations for the UI elements. + +By default, this option is set to `null`, indicating that no language file is specified for the CKEditor UI. However, you can adjust this value to specify the URL of a language file that contains the translations for the desired language. + +To configure the language file for the CKEditor's UI within Toolbar 1, update the value of `toolbars.toolbar-1.ui-language.script` in the `config/nova-ckeditor.php` file with the URL of the language file. + +\ +Example: + +```php + [ + 'toolbar-1' => [ + 'ui-language' => [ + 'name' => 'fa', + 'script' => asset('js/ckeditor-fa.js'), + ], + ], + ] +]; +``` + +{% hint style="info" %} +You can also specify an external URL if the language file is hosted on a CDN or another remote location. +{% endhint %} + + + + + diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/video-browser.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/video-browser.md new file mode 100644 index 0000000..8540f28 --- /dev/null +++ b/docs/advanced-usage/configuration/toolbars/toolbar-1/video-browser.md @@ -0,0 +1,18 @@ +--- +description: toolbars.toolbar-1.browser.video +--- + +# Video Browser + +| Property Name | Type | Default | +| -------------------------------- | ---- | ------- | +| toolbars.toolbar-1.browser.video | bool | true | + +This option allows you to enable or disable the video picker within the toolbar. By default, this option is set to `true`, indicating that the video picker is enabled. + +The video picker provides a convenient way to select and insert videos into the CKEditor field. However, in some cases, you may want to disable the video picker functionality. + +To disable the video picker within Toolbar 1, update the value of `toolbars.toolbar-1.browser.video` in the `config/nova-ckeditor.php` file to `false`. + + + diff --git a/docs/advanced-usage/configuration/video-model.md b/docs/advanced-usage/configuration/video-model.md new file mode 100644 index 0000000..e85ad18 --- /dev/null +++ b/docs/advanced-usage/configuration/video-model.md @@ -0,0 +1,16 @@ +--- +description: video-model +--- + +# Video Model + +| Property Name | Type | Default | +| ------------- | ------ | -------------------------------------------------- | +| video-model | string | `App\Models\Video` | + +The `video-model` configuration option allows you to specify the path of your **video** model within your Laravel application. This configuration determines which video model will be used for handling videos within the CKEditor field. + +By default, the `video-model` configuration option is set to `App\Models\Video`, assuming that you have a `Video` model located in the `app/Models` directory of your application. However, you can customize this path to match the location of your own video model. + +To configure the `video-model` option, update the value in the configuration file `config/nova-ckeditor.php` with the desired path to your video model. + diff --git a/docs/advanced-usage/customize-imagestorage.md b/docs/advanced-usage/customize-imagestorage.md new file mode 100644 index 0000000..f33e436 --- /dev/null +++ b/docs/advanced-usage/customize-imagestorage.md @@ -0,0 +1,23 @@ +# Customize ImageStorage + +You have the option to override the `ImageStorage` service by binding your own extended version using the following code snippet: + +```php +use Illuminate\Http\Request; +use Mostafaznv\NovaCkEditor\ImageStorage; + +class MyImageStorage extends ImageStorage +{ + public function __invoke(Request $request) + { + // TODO: Change the default implementation. + } +} + +$this->app->bind('ckeditor-image-storage', MyImageStorage::class); +``` + +By creating a custom `MyImageStorage` class that extends `ImageStorage`, you can define your own logic for handling image storage within the `__invoke()` method. Afterward, binding the custom class to the `'ckeditor-image-storage'` key allows Laravel Nova to use your extended implementation instead of the default one. + +Within the `__invoke()` method of `MyImageStorage`, you can implement your desired functionality to handle image storage according to your specific requirements. + diff --git a/docs/advanced-usage/customize-toolbar-items.md b/docs/advanced-usage/customize-toolbar-items.md new file mode 100644 index 0000000..7f553cc --- /dev/null +++ b/docs/advanced-usage/customize-toolbar-items.md @@ -0,0 +1,29 @@ +# Customize Toolbar Items + +In addition to customizing toolbar items using the `config/nova-ckeditor.php` file, you can pass custom toolbar items directly to the `toolbar()` method as the second argument. This method allows you to customize toolbar items on-the-fly for the CkEditor fields where it is applied. + +While the configuration file provides a generic way to customize toolbar items for all instances in the Nova panel, using the `toolbar()` method with custom items allows you to have more granular control over the toolbar items, tailoring them to your specific needs in different areas of your Nova resources. + +By leveraging these two approaches, you have the flexibility to customize toolbar items globally or on a per-field basis, depending on the level of customization required in your application. + +
use Mostafaznv\NovaCkEditor\CkEditor;
+
+class Article extends Resource
+{
+    public function fields(Request $request): array
+    {
+        return [
+            ID::make()->sortable(),
+
+            CkEditor::make(trans('Content'), 'content')
+                ->toolbar('toolbar-2', [
+                    'textPartLanguage', 'heading', '|', 'fontSize'
+                ])
+                ->stacked()
+        ];
+    }
+}
+
+ + + diff --git a/docs/advanced-usage/media-embed.md b/docs/advanced-usage/media-embed.md new file mode 100644 index 0000000..f7bbfa7 --- /dev/null +++ b/docs/advanced-usage/media-embed.md @@ -0,0 +1,71 @@ +# Media Embed + +The [media embed](https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html) feature adds support for easily inserting embeddable media, such as YouTube or Vimeo videos and tweets, into your rich text content. + +* To embed media, you can utilize the Insert media [![](https://user-images.githubusercontent.com/7619687/212122242-26996316-aca1-4dcd-9117-6b17a3f77fe5.png)](https://user-images.githubusercontent.com/7619687/212122242-26996316-aca1-4dcd-9117-6b17a3f77fe5.png) button available in the toolbar. +* Alternatively, you can directly paste the media URL into the editor content, and it will be automatically embedded for you. + + + +#### Configuration: + +To configure the media embed feature, you have the option to override `providers` or add `extraProviders` through the configuration file. + +{% code title="config/nova-ckeditor.php" %} +```php + [ + ... + + 'options' => [ + ... + + 'mediaEmbed' => [ + 'providers' => [ + [ + 'name' => 'youtube', + 'url' => [ + '/^(?:m\.)?youtube\.com\/watch\?v=([\w-]+)(?:&t=(\d+))?/', + '/^(?:m\.)?youtube\.com\/v\/([\w-]+)(?:\?t=(\d+))?/', + '/^youtube\.com\/embed\/([\w-]+)(?:\?start=(\d+))?/', + '/^youtu\.be\/([\w-]+)(?:\?t=(\d+))?/' + ], + 'html' => ' +
+
id: ${match[1]}, start: ${match[2]}
+