Allow CKEditor custom config to work on Vue component

Also cleaned up styling issues; thank you ESLint.
Signed-off-by: 's avatarMicheal Mand <micheal@kmdwebdesigns.com>
parent f6df9b81
<template> <template>
<div class="ckeditor"> <textarea
<textarea :name="name"
:name="name" :id="id"
:id="id" :value="value"
:value="value" :types="types"
:types="types" :config="config"
:config="config"> class="ckeditor"
</textarea> ></textarea>
</div>
</template> </template>
<script> <script>
...@@ -18,77 +17,87 @@ ...@@ -18,77 +17,87 @@
props: { props: {
name: { name: {
type: String, type: String,
default: () => `editor-${++inc}` default: () => `editor-${++inc}`,
}, },
value: { value: {
type: String type: String,
default: () => '',
}, },
id: { id: {
type: String, type: String,
default: () => `editor-${inc}` default: () => `editor-${inc}`,
}, },
types: { types: {
type: String, type: String,
default: () => `classic` default: () => 'classic',
}, },
config: { config: {
type: Object, type: Object,
default: () => {} default: () => {
} if (window.AsgardCMS.ckeditorCustomConfig !== '') {
return {
customConfig: window.AsgardCMS.ckeditorCustomConfig,
};
}
return undefined;
},
},
}, },
data () { data() {
return { destroyed: false } return { destroyed: false };
}, },
computed: { computed: {
instance () { instance() {
return CKEDITOR.instances[this.id] return CKEDITOR.instances[this.id];
} },
}, },
watch: { watch: {
value (val) { value(val) {
if (this.instance) { if (this.instance) {
let html = this.instance.getData(); const html = this.instance.getData();
if (val !== html) { if (val !== html) {
this.instance.setData(val); this.instance.setData(val);
} }
} }
} },
}, },
mounted () { mounted() {
if (typeof CKEDITOR === 'undefined') { if (typeof CKEDITOR === 'undefined') {
console.log('CKEDITOR is missing (http://ckeditor.com/)') console.log('CKEDITOR is missing (http://ckeditor.com/)');
} else { } else {
if (this.types === 'inline') { if (this.types === 'inline') {
CKEDITOR.inline(this.id, this.config) CKEDITOR.inline(this.id, this.config);
} else { } else {
CKEDITOR.replace(this.id, this.config) CKEDITOR.replace(this.id, this.config);
} }
this.instance.on('change', () => { this.instance.on('change', () => {
let html = this.instance.getData() const html = this.instance.getData();
if (html !== this.value) { if (html !== this.value) {
this.$emit('input', html) this.$emit('input', html);
this.$emit('update:value', html) this.$emit('update:value', html);
} }
}) });
this.instance.on('blur', () => { this.instance.on('blur', () => {
this.$emit('blur', this.instance) this.$emit('blur', this.instance);
}) });
this.instance.on('focus', () => { this.instance.on('focus', () => {
this.$emit('focus', this.instance) this.$emit('focus', this.instance);
}) });
} }
}, },
beforeDestroy () { beforeDestroy() {
if (!this.destroyed) { if (!this.destroyed) {
this.instance.focusManager.blur(true) this.instance.focusManager.blur(true);
this.instance.removeAllListeners() this.instance.removeAllListeners();
try { try {
this.instance.destroy() this.instance.destroy();
} catch (e) { } } catch (e) {
this.destroyed = true }
this.destroyed = true;
} }
} },
} };
</script> </script>
<style> <style>
.ckeditor::after { .ckeditor::after {
......
...@@ -81,6 +81,7 @@ ...@@ -81,6 +81,7 @@
locales: {!! json_encode(LaravelLocalization::getSupportedLocales()) !!}, locales: {!! json_encode(LaravelLocalization::getSupportedLocales()) !!},
currentLocale: '{{ locale() }}', currentLocale: '{{ locale() }}',
editor: '{{ $activeEditor }}', editor: '{{ $activeEditor }}',
ckeditorCustomConfig: '{{ config('asgard.core.core.ckeditor-config-file-path', '') }}',
adminPrefix: '{{ config('asgard.core.core.admin-prefix') }}', adminPrefix: '{{ config('asgard.core.core.admin-prefix') }}',
hideDefaultLocaleInURL: '{{ config('laravellocalization.hideDefaultLocaleInURL') }}', hideDefaultLocaleInURL: '{{ config('laravellocalization.hideDefaultLocaleInURL') }}',
filesystem: '{{ config('asgard.media.config.filesystem') }}' filesystem: '{{ config('asgard.media.config.filesystem') }}'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment