(#85) CKEditor 5 기능 추가 및 Editor config 호환 수정

    - 설정에서 지정한 css file을 불러올 수 없는 문제 수정
    - HTML 편집, 툴바 사용 권한이 적용되지 않는 문제 수정
    - 펼치기 옵션 추가
    - 전체화면 기능 추가
    - redo, undo, code 툴바 버튼 추가

assets/ckeditor5-36.0.0/src/ckeditor.js

@@ -75,6 +75,9 @@ import TodoList from "@ckeditor/ckeditor5-list/src/todolist";
 import Underline from "@ckeditor/ckeditor5-basic-styles/src/underline.js";
 import WordCount from "@ckeditor/ckeditor5-word-count/src/wordcount.js";
 // import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog.js';
+
+
+import FullScreen from './plugins/ckeditor5-fullscreen/FullScreen'
 import {
   Emoji,
   EmojiActivity,
@@ -89,8 +92,7 @@ import {
 
 import { isAndroid, isiOS } from "@ckeditor/ckeditor5-utils/src/env";
 
-class Editor extends ClassicEditor {
-}
+class Editor extends ClassicEditor {}
 
 // Plugins to include in the build.
 Editor.builtinPlugins = [
@@ -174,16 +176,17 @@ Editor.builtinPlugins = [
   EmojiPeople,
   EmojiPlaces,
   EmojiSymbols,
+  FullScreen
 ];
 
 Editor.utils = {
   isMobile: function (userAgent) {
     return isAndroid(userAgent) || isiOS(userAgent);
   },
-}
+};
 
 Editor.defaultConfig = {
-  placeholder: ' ',
+  placeholder: " ",
   htmlSupport: {
     allow: [
       {
@@ -224,6 +227,7 @@ Editor.defaultConfig = {
       "indent",
       "|",
       "blockQuote",
+      "code",
       "link",
       "horizontalLine",
       "|",
@@ -235,6 +239,11 @@ Editor.defaultConfig = {
       "|",
       "findAndReplace",
       "sourceEditing",
+      "|",
+      "undo",
+      "redo",
+      "|",
+      "fullScreen",
     ],
     shouldNotGroupWhenFull: true,
   },

assets/ckeditor5-36.0.0/src/plugins/ckeditor5-fullscreen/FullScreen.js

@@ -0,0 +1,47 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ImageFullBig from './icons/fullscreen-big.svg';
+import ImageFullCancel from './icons/fullscreen-cancel.svg';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import './css/style.css';
+
+export default class FullScreen extends Plugin {
+    init() {
+        const editor = this.editor;
+
+        editor.ui.componentFactory.add( 'fullScreen', locale => {
+            const view = new ButtonView( locale );
+            let etat = 0; //si 0 position normale
+            view.set( {
+                label: 'Plein écran',
+                icon: ImageFullBig,
+                tooltip: true
+            } );
+
+            // Callback executed once the image is clicked.
+            view.on( 'execute', () => {
+                if(etat==1){
+                    editor.sourceElement.nextElementSibling.removeAttribute('id');
+                    document.body.removeAttribute('id');
+                    view.set( {
+                        label: 'Plein écran',
+                        icon: ImageFullBig,
+                        tooltip: true
+                    } );
+                    etat=0;
+                }else{
+                    editor.sourceElement.nextElementSibling.setAttribute("id", 'fullscreeneditor');
+                    document.body.setAttribute("id", "fullscreenoverlay");
+                    view.set( {
+                        label: 'Mode Normal',
+                        icon: ImageFullCancel,
+                        tooltip: true
+                    } );
+                    etat=1;
+                }
+
+            } );
+
+            return view;
+        } );
+    }
+}

assets/ckeditor5-36.0.0/src/plugins/ckeditor5-fullscreen/README.md

@@ -0,0 +1,33 @@
+Fullscreen for CKEditor 5 classic editor build
+
+
+```
+npm i -D @ckeditor/ckeditor5-core
+npm i -D @ckeditor/ckeditor5-ui
+```
+
+
+
+Include in your ckeditor.js
+
+```
+import FullScreen from './FullScreen';
+```
+
+Include in the plugin List
+ClassicEditor.builtinPlugins = [
+	....
+	FullScreen,
+];
+```
+
+And include it in your toolbar
+```
+ClassicEditor.defaultConfig = {
+	toolbar: {
+		items: [
+			.....,
+			'fullScreen'
+		]
+	},
+```

assets/ckeditor5-36.0.0/src/plugins/ckeditor5-fullscreen/css/style.css

@@ -0,0 +1,14 @@
+#fullscreenoverlay{
+	overflow: hidden;
+}
+#fullscreeneditor{
+    position: fixed !important;
+	top:0;
+	left: 0;
+	right:0;
+	bottom: 0;
+	z-index:1000;
+}
+#fullscreeneditor .ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline, #fullscreeneditor .ck.ck-editor__main {
+    height: 100%;
+}

assets/css/ckeditor5.css

@@ -37,6 +37,20 @@
   padding-left: 10px;
   font-size: 12px;
 }
+.ck.ck-word-count .xf-ckeditor5__height_resize {
+  background: none;
+  border: none;
+  font-size: 12px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.ck.ck-word-count .xf-ckeditor5__height_resize.active {
+  background: #dbecff;
+  color: #2684ff;
+}
+.ck.ck-word-count .xf-ckeditor5__height_resize:hover {
+  background: #f0f0f0;
+}
 
 xe-content,
 .xe-content,

assets/css/src/ckeditor5.config.scss

@@ -43,6 +43,23 @@
     padding-left: 10px;
     font-size: 12px;
   }
+
+  .xf-ckeditor5__height_resize {
+    background: none;
+    border: none;
+    font-size: 12px;
+    border-radius: 2px;
+    cursor: pointer;
+
+    &.active {
+      background: #dbecff;
+      color: #2684ff;
+    }
+
+    &:hover {
+      background: #f0f0f0;
+    }
+  }
 }
 
 

assets/js/xe.ckeditor5.define.js

@@ -5,14 +5,17 @@
     var Editor = apps[0];
     var Lang = apps[1];
 
+    console.log(Lang);
     Editor.define({
       editorSettings: {
         name: "XEckeditor5",
         configs: {
           language: Lang.getCurrentLocale(),
           toolbar: {
-            shouldNotGroupWhenFull: !(CKEDITOR.utils.isMobile(window.navigator.userAgent))
-          }
+            shouldNotGroupWhenFull: !CKEDITOR.utils.isMobile(
+              window.navigator.userAgent
+            ),
+          },
         },
         on: {
           focus: function () {
@@ -31,6 +34,34 @@
           var fontSize = options.fontSize;
           var perms = options.perms || {};
 
+          XE.DynamicLoadManager.jsLoad(
+            "/assets/core/xe-ui-component/js/xe-tooltip.js"
+          );
+
+          $.extend(customOptions || {}, options);
+
+          customOptions.contentsCss = [];
+
+          if (!perms.html) {
+            customOptions.removePlugins = ["SourceEditing"];
+            customOptions.toolbar.items =
+              CKEDITOR.defaultConfig.toolbar.items.filter(function () {
+                return true;
+              });
+            var sourceToolIdx = customOptions.toolbar.items.findIndex(function (
+              t
+            ) {
+              return t === "SourceEditing";
+            });
+            if (sourceToolIdx > -1) {
+              customOptions.toolbar.items.splice(sourceToolIdx, 1);
+            }
+          }
+
+          if (!perms.tool) {
+            customOptions.toolbar.items = [];
+          }
+
           if (stylesheet) {
             if (typeof stylesheet === "string") {
               customOptions.contentsCss.push(stylesheet);
@@ -47,12 +78,6 @@
             }
           }
 
-          $.extend(customOptions || {}, options);
-
-          XE.DynamicLoadManager.jsLoad(
-            "/assets/core/xe-ui-component/js/xe-tooltip.js"
-          );
-
           return new Promise(function (resolve, rejext) {
             CKEDITOR.create(
               document.querySelector("#" + selector),
@@ -73,34 +98,58 @@
                 "xe-content-editable"
               );
 
-              var wordCountPlugin = editor.plugins.get( 'WordCount' );
-              $(editor.ui.view.editable.element).after(wordCountPlugin.wordCountContainer);
+              var wordCountPlugin = editor.plugins.get("WordCount");
+              var wordContainer = $(wordCountPlugin.wordCountContainer);
+              var unfold = $(
+                '<button class="xf-ckeditor5__height_resize" type="button"></button>'
+              );
+              unfold.text(XE.Lang.trans('ckeditor::unfold'))
+              var heightAutoStyle = $(
+                "<style> #"+selector+" + .ck-editor .ck-editor__editable_inline { height: auto; } .ck-source-editing-area { height: auto; } </style>"
+              );
+              unfold.on("click", function () {
+                if (window.document.body.contains(heightAutoStyle[0])) {
+                  unfold.removeClass('active')
+                  heightAutoStyle.remove();
+                } else {
+                  unfold.addClass('active')
+                  $(editor.ui.view.element.parentElement).append(heightAutoStyle);
+                }
+              });
+
+              wordContainer.prepend(unfold);
+
+              $(editor.ui.view.editable.element).after(wordContainer);
 
               if (options.height) {
                 $(editor.ui.view.element).after(
-                  "<style> .ck-editor__editable_inline { height: " +
+                  "<style> #"+selector+" + .ck-editor .ck-editor__editable_inline { min-height: " +
+                    customOptions.height +
+                    "px; height: " +
                     customOptions.height +
-                    "px; } .ck-source-editing-area { height: " +
+                    "px; } #"+selector+" + .ck-editor .ck-source-editing-area { min-height: " +
+                    customOptions.height +
+                    "px; height: " +
                     customOptions.height +
                     "px;  }</style>"
                 );
               }
 
-              // $('body').append(CKEDITOR.tools.buildStyleHtml(customOptions.contentsCss))
-
+              customOptions.contentsCss.forEach(function (css) {
+                XE.DynamicLoadManager.cssLoad(css);
+              });
 
               if (fontFamily || fontSize) {
-                var contentStyle = "<style>";
+                var contentStyle = "<style> #"+selector+" + .ck-editor .ck-editor__editable_inline {";
                 if (fontFamily && fontFamily.length > 0) {
                   contentStyle += "font-family:" + fontFamily.join(",");
                 }
 
                 if (fontSize) {
                   contentStyle += "font-size:" + fontSize;
                 }
-                contentStyle += "</style>";
+                contentStyle += "} </style>";
 
-                // if (contentStyle) CKEDITOR.addCss('.cke_editable{' + contentStyle + '}')
                 if (contentStyle !== "<style></style>") {
                   $(editor.ui.view.element).after(contentStyle);
                 }
@@ -183,8 +232,7 @@
           editor.model.insertContent(modelFragment);
         },
 
-        addTools: function (toolsMap, toolInfoList) {
-        },
+        addTools: function (toolsMap, toolInfoList) {},
 
         on: function (eventName, callback) {
           editors[this.props.selector].on(eventName, callback);

langs/lang.php

@@ -65,6 +65,10 @@
     'msgDeleteFile' => [
         'ko' => '첨부된 파일을 삭제하시겠습니까?',
         'en' => 'Are you sure you want to delete the attachment?'
-    ]
+    ],
+    'unfold' => [
+        'ko' => '펼치기',
+        'en' => 'Unfold'
+    ],
 ];
 

src/Editors/CkEditor5.php

@@ -83,7 +83,7 @@ protected function initAssets()
                 plugin::asset('assets/js/media_library.ckeditor5.js'),
                 plugin::asset('assets/js/xe.ckeditor5.define.js'),
             ])->before('assets/core/editor/editor.bundle.js')->load();
-// dd('asdsa');
+
             $this->frontend->css([
                 plugin::asset('assets/css/editor.css'),
                 plugin::asset('assets/css/ckeditor5.css'),