Merge pull request #652 from mikemand/feature/allow-custom-config

Allow CKEditor custom config to work in Vue component

Modules/Core/Assets/js/components/CkEditor.vue

 <template>
-    <div class="ckeditor">
-        <textarea
-                :name="name"
-                :id="id"
-                :value="value"
-                :types="types"
-                :config="config">
-        </textarea>
-    </div>
+    <textarea
+        :name="name"
+        :id="id"
+        :value="value"
+        :types="types"
+        :config="config"
+    ></textarea>
 </template>
 
 <script>
@@ -18,77 +16,87 @@
         props: {
             name: {
                 type: String,
-                default: () => `editor-${++inc}`
+                default: () => `editor-${++inc}`,
             },
             value: {
-                type: String
+                type: String,
+                default: () => '',
             },
             id: {
                 type: String,
-                default: () => `editor-${inc}`
+                default: () => `editor-${inc}`,
             },
             types: {
                 type: String,
-                default: () => `classic`
+                default: () => 'classic',
             },
             config: {
                 type: Object,
-                default: () => {}
-            }
+                default: () => {
+                    if (window.AsgardCMS.ckeditorCustomConfig !== '') {
+                        return {
+                            customConfig: window.AsgardCMS.ckeditorCustomConfig,
+                        };
+                    }
+
+                    return undefined;
+                },
+            },
         },
-        data () {
-            return { destroyed: false }
+        data() {
+            return { destroyed: false };
         },
         computed: {
-            instance () {
-                return CKEDITOR.instances[this.id]
-            }
+            instance() {
+                return CKEDITOR.instances[this.id];
+            },
         },
         watch: {
-            value (val) {
+            value(val) {
                 if (this.instance) {
-                    let html = this.instance.getData();
+                    const html = this.instance.getData();
                     if (val !== html) {
                         this.instance.setData(val);
                     }
                 }
-            }
+            },
         },
-        mounted () {
+        mounted() {
             if (typeof CKEDITOR === 'undefined') {
-                console.log('CKEDITOR is missing (http://ckeditor.com/)')
+                console.log('CKEDITOR is missing (http://ckeditor.com/)');
             } else {
                 if (this.types === 'inline') {
-                    CKEDITOR.inline(this.id, this.config)
+                    CKEDITOR.inline(this.id, this.config);
                 } else {
-                    CKEDITOR.replace(this.id, this.config)
+                    CKEDITOR.replace(this.id, this.config);
                 }
                 this.instance.on('change', () => {
-                    let html = this.instance.getData()
+                    const html = this.instance.getData();
                     if (html !== this.value) {
-                        this.$emit('input', html)
-                        this.$emit('update:value', html)
+                        this.$emit('input', html);
+                        this.$emit('update:value', html);
                     }
-                })
+                });
                 this.instance.on('blur', () => {
-                    this.$emit('blur', this.instance)
-                })
+                    this.$emit('blur', this.instance);
+                });
                 this.instance.on('focus', () => {
-                    this.$emit('focus', this.instance)
-                })
+                    this.$emit('focus', this.instance);
+                });
             }
         },
-        beforeDestroy () {
+        beforeDestroy() {
             if (!this.destroyed) {
-                this.instance.focusManager.blur(true)
-                this.instance.removeAllListeners()
+                this.instance.focusManager.blur(true);
+                this.instance.removeAllListeners();
                 try {
-                    this.instance.destroy()
-                } catch (e) { }
-                this.destroyed = true
+                    this.instance.destroy();
+                } catch (e) {
+                }
+                this.destroyed = true;
             }
-        }
-    }
+        },
+    };
 </script>
 <style>
     .ckeditor::after {

Themes/Adminlte/views/layouts/master.blade.php

@@ -81,6 +81,7 @@
         locales: {!! json_encode(LaravelLocalization::getSupportedLocales()) !!},
         currentLocale: '{{ locale() }}',
         editor: '{{ $activeEditor }}',
+        ckeditorCustomConfig: '{{ config('asgard.core.core.ckeditor-config-file-path', '') }}',
         adminPrefix: '{{ config('asgard.core.core.admin-prefix') }}',
         hideDefaultLocaleInURL: '{{ config('laravellocalization.hideDefaultLocaleInURL') }}',
         filesystem: '{{ config('asgard.media.config.filesystem') }}'