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>
<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"
class="ckeditor"
></textarea>
</template>
<script>
......@@ -18,77 +17,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 {
......
......@@ -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') }}'
......
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