Upgrade CKEditor

Signed-off-by: Micheal Mand <[email protected]>
arturmamedov · Sep 1, 2020 · 5890d0f · 5890d0f
1 parent bf02285
commit 5890d0f
Show file tree

Hide file tree

Showing 639 changed files with 13,693 additions and 11,806 deletions.
diff --git a/Modules/Core/Assets/js/components/CkEditor.vue b/Modules/Core/Assets/js/components/CkEditor.vue
@@ -1,19 +1,23 @@
 <template>
-    <textarea
-        :name="name"
-        :id="id"
-        :value="value"
-        :types="types"
+    <editor
+        tag-name="textarea"
+        :type="types"
         :config="config"
-        :disabled="readOnlyMode"
-        class="editor"
-    ></textarea>
+        :read-only="readOnlyMode"
+        :value="value"
+        @input="$emit('input', $event)"
+    ></editor>
 </template>
 
 <script>
+    import CKEditor from 'ckeditor4-vue';
+
     let inc = new Date().getTime();
 
     export default {
+        components: {
+            'editor': CKEditor.component,
+        },
         props: {
             name: {
                 type: String,
@@ -45,135 +49,15 @@
             },
             instanceReadyCallback: {
                 type: Function,
+                default: '',
             },
             readOnlyMode: {
                 type: Boolean,
                 default: () => false,
             },
         },
         data() {
-            return {
-                instanceValue: '',
-            };
-        },
-        computed: {
-            instance() {
-                return CKEDITOR.instances[this.id];
-            },
-        },
-        watch: {
-            value(val) {
-                try {
-                    if (this.instance) {
-                        this.update(val);
-                    }
-                } catch (e) {
-                }
-            },
-            readOnlyMode(val) {
-                this.instance.setReadOnly(val);
-            },
-        },
-        mounted() {
-            this.create();
-        },
-        methods: {
-            create() {
-                if (typeof CKEDITOR === 'undefined') {
-                    console.log('CKEDITOR is missing (http://ckeditor.com/)');
-                } else {
-                    if (this.types === 'inline') {
-                        CKEDITOR.inline(this.id, this.config);
-                    } else {
-                        CKEDITOR.replace(this.id, this.config);
-                    }
-
-                    this.instance.setData(this.value);
-
-                    this.instance.on('instanceReady', () => {
-                        this.instance.setData(this.value);
-                    });
-
-                    // Ckeditor change event
-                    this.instance.on('change', this.onChange);
-
-                    // Ckeditor mode html or source
-                    this.instance.on('mode', this.onMode);
-
-                    // Ckeditor blur event
-                    this.instance.on('blur', evt => {
-                        this.$emit('blur', evt);
-                    });
-
-                    // Ckeditor focus event
-                    this.instance.on('focus', evt => {
-                        this.$emit('focus', evt);
-                    });
-
-                    // Ckeditor contentDom event
-                    this.instance.on('contentDom', evt => {
-                        this.$emit('contentDom', evt);
-                    });
-
-                    // Ckeditor dialog definition event
-                    CKEDITOR.on('dialogDefinition', evt => {
-                        this.$emit('dialogDefinition', evt);
-                    });
-
-                    // Ckeditor file upload request event
-                    this.instance.on('fileUploadRequest', evt => {
-                        this.$emit('fileUploadRequest', evt);
-                    });
-
-                    // Ckditor file upload response event
-                    this.instance.on('fileUploadResponse', evt => {
-                        setTimeout(() => {
-                            this.onChange();
-                        }, 0);
-                        this.$emit('fileUploadResponse', evt);
-                    });
-
-                    // Listen for instanceReady event
-                    if (typeof this.instanceReadyCallback !== 'undefined') {
-                        this.instance.on('instanceReady', this.instanceReadyCallback);
-                    }
-
-                    // Registering the beforeDestroyed hook right after creating the instance
-                    this.$once('hook:beforeDestroy', () => {
-                        this.destroy();
-                    });
-                }
-            },
-            update(val) {
-                if (this.instanceValue !== val) {
-                    this.instance.setData(val, { internal: false });
-                    this.instanceValue = val;
-                }
-            },
-            destroy() {
-                try {
-                    let editor = window['CKEDITOR'];
-                    if (editor.instances && editor.instances[this.id]) {
-                        editor.instances[this.id].destroy();
-                    }
-                } catch (e) {
-                }
-            },
-            onMode() {
-                if (this.instance.mode === 'source') {
-                    let editable = this.instance.editable();
-                    editable.attachListener(editable, 'input', () => {
-                        this.onChange();
-                    });
-                }
-            },
-            onChange() {
-                let html = this.instance.getData();
-                if (html !== this.value) {
-                    this.$emit('input', html);
-                    this.instanceValue = html;
-                }
-            },
+            return {};
         },
     };
 </script>