Add Cke4 option for HTML editor component

Block8 · Sep 5, 2018 · 112f774 · 112f774
1 parent 104bd73
commit 112f774
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "laravel-mix": "^2.1.11"
   },
   "dependencies": {
+    "ckeditor": "^4.10.0",
     "@ckeditor/ckeditor5-build-classic": "^10.0.1",
     "bootstrap-notify": "^3.1.3",
     "chartist": "^0.11.0",

diff --git a/resources/assets/js/components/HtmlEditorComponent.js b/resources/assets/js/components/HtmlEditorComponent.js
@@ -2,19 +2,52 @@
 class HtmlEditorComponent extends AdminUiComponent
 {
     ready() {
+        if (!CKEDITOR) {
+            this.initCke5();
+        } else {
+            this.initCke4();
+        }
+    }
+
+    initCke4() {
         let self = this;
 
         $('.html-editor').each(function () {
-            console.log('HTML EDITOR COMPONENT');
-
             let $el = $(this);
+            let config = {
+                toolbarGroups: [
+                    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
+                    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
+                    { name: 'insert', groups: [ 'insert' ] },
+                    { name: 'forms', groups: [ 'forms' ] },
+                    { name: 'tools', groups: [ 'tools' ] },
+                    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
+                    { name: 'others', groups: [ 'others' ] },
+                    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
+                    { name: 'links', groups: [ 'links' ] },
+                    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
+                    { name: 'styles', groups: [ 'styles' ] },
+                    { name: 'colors', groups: [ 'colors' ] },
+                    { name: 'about', groups: [ 'about' ] }
+                ],
+                removeButtons: 'Subscript,Superscript,Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,Scayt,Anchor,Image,Table,HorizontalRule,SpecialChar,Maximize,Source,Strike,About,Outdent,Indent,Styles',
+                fillEmptyBlocks: false,
+                removePlugins: 'elementspath',
+            };
 
+            CKEDITOR.replace($el.attr('id'), config);
+        });
+    }
+
+    initCke5() {
+        let self = this;
+
+        $('.html-editor').each(function () {
             let config = {
                 toolbar: [ 'heading', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
                 fillEmptyBlocks: false,
             };
 
-            console.log(config);
 
             if ($el.data('upload')) {
                 config.toolbar.push('imageUpload');

diff --git a/resources/views/layouts/primary.blade.php b/resources/views/layouts/primary.blade.php
@@ -170,10 +170,11 @@
 <script src="/block8/ui/js/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
 <script src="/block8/ui/js/sweetalert2/sweetalert2.all.min.js"></script>
 <script src="/block8/ui/js/chartist/chartist.min.js"></script>
+@if(($ckeditorVersion ?? 5) == 5)
 <script src="/block8/ui/js/ckeditor5/ckeditor.js"></script>
-
-
-
+@else
+<script src="/block8/ui/js/ckeditor/ckeditor.js"></script>
+@endif
 
 <script src="{{ mix('/block8/ui/js/ui.js') }}"></script>
 

diff --git a/webpack.mix.js b/webpack.mix.js
@@ -17,6 +17,7 @@ module.exports = function (mix) {
     mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/block8/ui/js/jquery.min.js');
     mix.copy('node_modules/moment/min/moment.min.js', 'public/block8/ui/js/moment.min.js');
     mix.copy('node_modules/animate.css/animate.min.css', 'public/block8/ui/css/animate.css');
+    mix.copyDirectory('node_modules/ckeditor', 'public/block8/ui/js/ckeditor');
     mix.copyDirectory('node_modules/@ckeditor/ckeditor5-build-classic/build', 'public/block8/ui/js/ckeditor5');
     mix.copyDirectory('node_modules/select2', 'public/block8/ui/js/select2');
     mix.copyDirectory('node_modules/chartist/dist', 'public/block8/ui/js/chartist');