Merge pull request #64 from mostafaznv/dev

Add ResizeImage Plugin to CkEditor
mostafaznv · Jul 6, 2023 · 619372a · 619372a
2 parents ef11e95 + 48a032b
commit 619372a
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 3 deletions.
diff --git a/config/nova-ckeditor.php b/config/nova-ckeditor.php
@@ -102,7 +102,7 @@
             'html-support' => [
                 'allow' => [
                     [
-                        'name'   => 'div',
+                        'name'    => 'div',
                         'classes' => true,
                     ],
                     [
@@ -140,6 +140,7 @@
                 'videoBrowser',
                 'mediaEmbed',
                 'link',
+                'resizeImage',
                 '|',
                 'bold',
                 'italic',
@@ -374,6 +375,70 @@
                     ]
                 ],
 
+                'image' => [
+                    'upload' => [
+                        'types' => ['gif', 'png', 'jpg', 'jpeg', 'webp']
+                    ],
+
+                    'resizeUnit' => '%',
+
+                    'resizeOptions' => [
+                        [
+                            'name'  => 'resizeImage:original',
+                            'value' => null,
+                            'label' => 'Original',
+                            'icon'  => 'original'
+                        ],
+                        [
+                            'name'  => 'resizeImage:25',
+                            'value' => '25',
+                            'label' => 'Small (25%)',
+                            'icon'  => 'small'
+                        ],
+                        [
+                            'name'  => 'resizeImage:50',
+                            'value' => '50',
+                            'label' => 'Medium',
+                            'icon'  => 'medium'
+                        ],
+                        [
+                            'name'  => 'resizeImage:75',
+                            'value' => '75',
+                            'label' => 'Large (75%)',
+                            'icon'  => 'large'
+                        ]
+                    ],
+
+                    'toolbar' => [
+                        'imageBrowser',
+                        '|',
+                        'imageStyle:full',
+                        'imageStyle:alignLeft',
+                        'imageStyle:alignCenter',
+                        'imageStyle:alignRight',
+                        '|',
+                        'imageTextAlternative',
+                        'toggleImageCaption',
+                        '|',
+                        'imageStyle:block',
+                        'imageStyle:side',
+                        '|',
+                        'linkImage',
+                        '|',
+                        'resizeImage:25',
+                        'resizeImage:50',
+                        'resizeImage:75',
+                        'resizeImage:original',
+                    ],
+
+                    'styles' => [
+                        'full',
+                        'alignLeft',
+                        'alignCenter',
+                        'alignRight',
+                    ]
+                ],
+
                 'mediaEmbed' => []
             ],
         ]

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/ckeditor/ckeditor.js b/resources/js/ckeditor/ckeditor.js
@@ -41,6 +41,7 @@ import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'
 import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'
 import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'
 import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize'
 import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'
 import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed'
 import ImageTextAlternative from '@ckeditor/ckeditor5-image/src/imagetextalternative'
@@ -113,6 +114,7 @@ export default class CkEditor extends ClassicEditorBase {
             ImageStyle,
             ImageUpload,
             ImageCaption,
+            ImageResize,
             ImageToolbar,
             ImageTextAlternative,
             MediaEmbed,

diff --git a/resources/js/ckeditor/config/image.js b/resources/js/ckeditor/config/image.js
@@ -6,6 +6,33 @@ export default {
         upload: {
             types: ['gif', 'png', 'jpg', 'jpeg', 'webp']
         },
+        resizeUnit: '%',
+        resizeOptions: [
+            {
+                name: 'resizeImage:original',
+                value: null,
+                label: 'Original',
+                icon: 'original'
+            },
+            {
+                name: 'resizeImage:25',
+                value: '25',
+                label: 'Small (25%)',
+                icon: 'small'
+            },
+            {
+                name: 'resizeImage:50',
+                value: '50',
+                label: 'Medium (50%)',
+                icon: 'medium'
+            },
+            {
+                name: 'resizeImage:75',
+                value: '75',
+                label: 'Large (75%)',
+                icon: 'large'
+            }
+        ],
         toolbar: [
             'imageBrowser',
             '|',
@@ -20,7 +47,12 @@ export default {
             'imageStyle:block',
             'imageStyle:side',
             '|',
-            'linkImage'
+            'linkImage',
+            '|',
+            'resizeImage:25',
+            'resizeImage:50',
+            'resizeImage:75',
+            'resizeImage:original',
         ],
         styles: [
             'full',

diff --git a/resources/js/components/editor-field.vue b/resources/js/components/editor-field.vue
@@ -52,8 +52,10 @@ export default {
         createCkEditor() {
             const toolbarOptions = this.initToolbarOptions(this.currentField.toolbarOptions)
             const headings = toolbarOptions.headings
+            const image = toolbarOptions.image ?? CkEditor.defaultConfig.image
 
             delete toolbarOptions.headings
+            delete toolbarOptions.image
 
             const config = {
                 attribute: this.$options[this.editorUUID],
@@ -62,6 +64,7 @@ export default {
                 snippetBrowser: this.currentField.snippetBrowser,
                 htmlSupport: this.normalizeHtmlSupportItems(this.currentField.htmlSupport),
                 isReadOnly: this.currentField.readonly,
+                image: image,
                 language: {
                     ui: this.currentField.uiLanguage,
                     content: this.currentField.contentLanguage,