Skip to content
Permalink
Browse files

Updating VueCKEditor

  • Loading branch information
Rienus Schot
Rienus Schot committed Jan 14, 2020
1 parent 46e2562 commit aa3cb6b3f50ad6ee7412542f0f2f6d7e4182a445
Showing with 164 additions and 92 deletions.
  1. +164 −92 Assets/js/components/CkEditor.vue
@@ -1,99 +1,171 @@
<template>
<div class="ckeditor">
<textarea
:name="name"
:id="id"
:value="value"
:types="types"
:config="config">
</textarea>
</div>
<div class="ckeditor">
<textarea
:name="name"
:id="id"
:value="value"
:types="types"
:config="config"
:disabled="readOnlyMode"
>
</textarea>
</div>
</template>

<script>
// Source: https://github.com/dangvanthanh/vue-ckeditor2
let inc = new Date().getTime();
export default {
name: 'vue-ckeditor',
props: {
name: {
type: String,
default: () => `editor-${++inc}`
},
value: {
type: String
},
id: {
type: String,
default: () => `editor-${inc}`
},
types: {
type: String,
default: () => `classic`
},
config: {
type: Object,
default: () => {}
}
},
data () {
return { destroyed: false }
},
computed: {
instance () {
return CKEDITOR.instances[this.id]
}
},
watch: {
value (val) {
if (this.instance) {
let html = this.instance.getData();
if (val !== html) {
this.instance.setData(val);
}
}
}
},
mounted () {
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.on('change', () => {
let html = this.instance.getData()
if (html !== this.value) {
this.$emit('input', html)
this.$emit('update:value', html)
}
})
this.instance.on('blur', () => {
this.$emit('blur', this.instance)
})
this.instance.on('focus', () => {
this.$emit('focus', this.instance)
})
}
},
beforeDestroy () {
if (!this.destroyed) {
this.instance.focusManager.blur(true)
this.instance.removeAllListeners()
try {
this.instance.destroy()
} catch (e) { }
this.destroyed = true
}
let inc = new Date().getTime();
export default {
name: 'VueCkeditor',
props: {
name: {
type: String,
default: () => `editor-${++inc}`
},
value: {
type: String
},
id: {
type: String,
default: () => `editor-${inc}`
},
types: {
type: String,
default: () => `classic`
},
config: {
type: Object,
default: () => {}
},
instanceReadyCallback: {
type: Function
},
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);
}
</script>
<style>
.ckeditor::after {
content: "";
display: table;
clear: both;
},
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;
}
}
</style>
}
};
</script>

0 comments on commit aa3cb6b

Please sign in to comment.
You can’t perform that action at this time.