Migrate from CKEditor to TinyMCE

README.md

@@ -41,7 +41,7 @@ You can use default theme or just add new themes to your blog. Default theme is
 - [Laravel-Roles](https://github.com/stanfortonski/Laravel-Roles)
 - [Laravel-Feed](https://github.com/spatie/laravel-feed)
 - [CoreUI 3.x](https://coreui.io)
-- [CKEditor5](https://ckeditor.com/ckeditor-5/)
+- [TinyMCE](https://tiny.cloud/)
 - [Disqus](https://disqus.com)
 - [Sass](https://sass-lang.com)
 - [Laravel-Debugbar](https://github.com/barryvdh/laravel-debugbar)

app/Helpers/Helper.php

@@ -6,7 +6,7 @@ class Helper
 {
     static public function stripTags(string $str): string
     {
-        return strip_tags($str, '<h1><h2><h3><h4><h5><h6><p><br><b><i><strong><mark><a><span><div><li><ul><ol><table><thead><td><tr><th><tbody><blockquote><section><code><pre>');
+        return strip_tags($str, '<h1><h2><h3><h4><h5><h6><p><br><b><i><strong><mark><a><span><div><li><ul><ol><table><thead><td><tr><th><tbody><blockquote><section><code><pre><aside><figure><img>');
     }
 
     static public function properUrl(string $str){

app/Http/Controllers/Admin/TinymceImageController.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class TinymceImageController extends Controller
+{
+    public function store(Request $request)
+    {
+        $imgpath = $request->file('file')->store('uploads', 'public');
+        return response()->json(['location' => asset('storage/'.$imgpath)]);
+    }
+}

app/Http/Middleware/VerifyCsrfToken.php

@@ -12,6 +12,6 @@ class VerifyCsrfToken extends Middleware
      * @var array
      */
     protected $except = [
-        //
+        '/upload'
     ];
 }

package.json

@@ -13,7 +13,6 @@
         "@babel/core": "^7.12.13",
         "@babel/plugin-proposal-class-properties": "^7.12.13",
         "@babel/preset-env": "^7.12.13",
-        "@ckeditor/ckeditor5-build-classic": "^23.1.0",
         "@coreui/coreui": "^3.4.0",
         "@fortawesome/fontawesome-free": "^5.15.2",
         "@popperjs/core": "^2.6.0",
@@ -30,5 +29,8 @@
         "sass": "^1.32.6",
         "sass-loader": "^10.1.1",
         "vue-template-compiler": "^2.6.12"
+    },
+    "dependencies": {
+        "tinymce": "^5.6.2"
     }
 }

public/js/tinymce/icons/default/index.js

@@ -0,0 +1,7 @@
+// Exports the "default" icons for usage with module loaders
+// Usage:
+//   CommonJS:
+//     require('tinymce/icons/default')
+//   ES2015:
+//     import 'tinymce/icons/default'
+require('./icons.js');

public/js/tinymce/plugins/advlist/index.js

@@ -0,0 +1,7 @@
+// Exports the "advlist" plugin for usage with module loaders
+// Usage:
+//   CommonJS:
+//     require('tinymce/plugins/advlist')
+//   ES2015:
+//     import 'tinymce/plugins/advlist'
+require('./plugin.js');

public/js/tinymce/plugins/advlist/plugin.js

@@ -0,0 +1,278 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ *
+ * Version: 5.6.2 (2020-12-08)
+ */
+(function () {
+    'use strict';
+
+    var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
+
+    var applyListFormat = function (editor, listName, styleValue) {
+      var cmd = listName === 'UL' ? 'InsertUnorderedList' : 'InsertOrderedList';
+      editor.execCommand(cmd, false, styleValue === false ? null : { 'list-style-type': styleValue });
+    };
+
+    var register = function (editor) {
+      editor.addCommand('ApplyUnorderedListStyle', function (ui, value) {
+        applyListFormat(editor, 'UL', value['list-style-type']);
+      });
+      editor.addCommand('ApplyOrderedListStyle', function (ui, value) {
+        applyListFormat(editor, 'OL', value['list-style-type']);
+      });
+    };
+
+    var global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools');
+
+    var getNumberStyles = function (editor) {
+      var styles = editor.getParam('advlist_number_styles', 'default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman');
+      return styles ? styles.split(/[ ,]/) : [];
+    };
+    var getBulletStyles = function (editor) {
+      var styles = editor.getParam('advlist_bullet_styles', 'default,circle,square');
+      return styles ? styles.split(/[ ,]/) : [];
+    };
+
+    var noop = function () {
+    };
+    var constant = function (value) {
+      return function () {
+        return value;
+      };
+    };
+    var never = constant(false);
+    var always = constant(true);
+
+    var none = function () {
+      return NONE;
+    };
+    var NONE = function () {
+      var eq = function (o) {
+        return o.isNone();
+      };
+      var call = function (thunk) {
+        return thunk();
+      };
+      var id = function (n) {
+        return n;
+      };
+      var me = {
+        fold: function (n, _s) {
+          return n();
+        },
+        is: never,
+        isSome: never,
+        isNone: always,
+        getOr: id,
+        getOrThunk: call,
+        getOrDie: function (msg) {
+          throw new Error(msg || 'error: getOrDie called on none.');
+        },
+        getOrNull: constant(null),
+        getOrUndefined: constant(undefined),
+        or: id,
+        orThunk: call,
+        map: none,
+        each: noop,
+        bind: none,
+        exists: never,
+        forall: always,
+        filter: none,
+        equals: eq,
+        equals_: eq,
+        toArray: function () {
+          return [];
+        },
+        toString: constant('none()')
+      };
+      return me;
+    }();
+    var some = function (a) {
+      var constant_a = constant(a);
+      var self = function () {
+        return me;
+      };
+      var bind = function (f) {
+        return f(a);
+      };
+      var me = {
+        fold: function (n, s) {
+          return s(a);
+        },
+        is: function (v) {
+          return a === v;
+        },
+        isSome: always,
+        isNone: never,
+        getOr: constant_a,
+        getOrThunk: constant_a,
+        getOrDie: constant_a,
+        getOrNull: constant_a,
+        getOrUndefined: constant_a,
+        or: self,
+        orThunk: self,
+        map: function (f) {
+          return some(f(a));
+        },
+        each: function (f) {
+          f(a);
+        },
+        bind: bind,
+        exists: bind,
+        forall: bind,
+        filter: function (f) {
+          return f(a) ? me : NONE;
+        },
+        toArray: function () {
+          return [a];
+        },
+        toString: function () {
+          return 'some(' + a + ')';
+        },
+        equals: function (o) {
+          return o.is(a);
+        },
+        equals_: function (o, elementEq) {
+          return o.fold(never, function (b) {
+            return elementEq(a, b);
+          });
+        }
+      };
+      return me;
+    };
+    var from = function (value) {
+      return value === null || value === undefined ? NONE : some(value);
+    };
+    var Optional = {
+      some: some,
+      none: none,
+      from: from
+    };
+
+    var isChildOfBody = function (editor, elm) {
+      return editor.$.contains(editor.getBody(), elm);
+    };
+    var isTableCellNode = function (node) {
+      return node && /^(TH|TD)$/.test(node.nodeName);
+    };
+    var isListNode = function (editor) {
+      return function (node) {
+        return node && /^(OL|UL|DL)$/.test(node.nodeName) && isChildOfBody(editor, node);
+      };
+    };
+    var getSelectedStyleType = function (editor) {
+      var listElm = editor.dom.getParent(editor.selection.getNode(), 'ol,ul');
+      var style = editor.dom.getStyle(listElm, 'listStyleType');
+      return Optional.from(style);
+    };
+
+    var findIndex = function (list, predicate) {
+      for (var index = 0; index < list.length; index++) {
+        var element = list[index];
+        if (predicate(element)) {
+          return index;
+        }
+      }
+      return -1;
+    };
+    var styleValueToText = function (styleValue) {
+      return styleValue.replace(/\-/g, ' ').replace(/\b\w/g, function (chr) {
+        return chr.toUpperCase();
+      });
+    };
+    var isWithinList = function (editor, e, nodeName) {
+      var tableCellIndex = findIndex(e.parents, isTableCellNode);
+      var parents = tableCellIndex !== -1 ? e.parents.slice(0, tableCellIndex) : e.parents;
+      var lists = global$1.grep(parents, isListNode(editor));
+      return lists.length > 0 && lists[0].nodeName === nodeName;
+    };
+    var addSplitButton = function (editor, id, tooltip, cmd, nodeName, styles) {
+      editor.ui.registry.addSplitButton(id, {
+        tooltip: tooltip,
+        icon: nodeName === 'OL' ? 'ordered-list' : 'unordered-list',
+        presets: 'listpreview',
+        columns: 3,
+        fetch: function (callback) {
+          var items = global$1.map(styles, function (styleValue) {
+            var iconStyle = nodeName === 'OL' ? 'num' : 'bull';
+            var iconName = styleValue === 'disc' || styleValue === 'decimal' ? 'default' : styleValue;
+            var itemValue = styleValue === 'default' ? '' : styleValue;
+            var displayText = styleValueToText(styleValue);
+            return {
+              type: 'choiceitem',
+              value: itemValue,
+              icon: 'list-' + iconStyle + '-' + iconName,
+              text: displayText
+            };
+          });
+          callback(items);
+        },
+        onAction: function () {
+          return editor.execCommand(cmd);
+        },
+        onItemAction: function (_splitButtonApi, value) {
+          applyListFormat(editor, nodeName, value);
+        },
+        select: function (value) {
+          var listStyleType = getSelectedStyleType(editor);
+          return listStyleType.map(function (listStyle) {
+            return value === listStyle;
+          }).getOr(false);
+        },
+        onSetup: function (api) {
+          var nodeChangeHandler = function (e) {
+            api.setActive(isWithinList(editor, e, nodeName));
+          };
+          editor.on('NodeChange', nodeChangeHandler);
+          return function () {
+            return editor.off('NodeChange', nodeChangeHandler);
+          };
+        }
+      });
+    };
+    var addButton = function (editor, id, tooltip, cmd, nodeName, _styles) {
+      editor.ui.registry.addToggleButton(id, {
+        active: false,
+        tooltip: tooltip,
+        icon: nodeName === 'OL' ? 'ordered-list' : 'unordered-list',
+        onSetup: function (api) {
+          var nodeChangeHandler = function (e) {
+            api.setActive(isWithinList(editor, e, nodeName));
+          };
+          editor.on('NodeChange', nodeChangeHandler);
+          return function () {
+            return editor.off('NodeChange', nodeChangeHandler);
+          };
+        },
+        onAction: function () {
+          return editor.execCommand(cmd);
+        }
+      });
+    };
+    var addControl = function (editor, id, tooltip, cmd, nodeName, styles) {
+      if (styles.length > 1) {
+        addSplitButton(editor, id, tooltip, cmd, nodeName, styles);
+      } else {
+        addButton(editor, id, tooltip, cmd, nodeName);
+      }
+    };
+    var register$1 = function (editor) {
+      addControl(editor, 'numlist', 'Numbered list', 'InsertOrderedList', 'OL', getNumberStyles(editor));
+      addControl(editor, 'bullist', 'Bullet list', 'InsertUnorderedList', 'UL', getBulletStyles(editor));
+    };
+
+    function Plugin () {
+      global.add('advlist', function (editor) {
+        if (editor.hasPlugin('lists')) {
+          register$1(editor);
+          register(editor);
+        }
+      });
+    }
+
+    Plugin();
+
+}());