Skip to content

Instantly share code, notes, and snippets.

@aimeos
Last active July 22, 2022 12:59
Show Gist options
  • Save aimeos/727b918c72372fde5c2f8ac722af5f8c to your computer and use it in GitHub Desktop.
Save aimeos/727b918c72372fde5c2f8ac722af5f8c to your computer and use it in GitHub Desktop.
CKEditor 4.x component for Vue.js 2.x supporting moving in DOM
Vue.component('html-editor', {
template: '\
<textarea rows="6" class="form-control htmleditor" v-bind:id="id" v-bind:name="name" v-bind:value="value"\
v-bind:placeholder="placeholder" v-bind:readonly="readonly" v-bind:tabindex="tabindex">\
</textarea>',
props: ['id', 'name', 'value', 'placeholder', 'readonly', 'tabindex'],
beforeDestroy: function() {
if(this.instance) {
this.instance.destroy();
this.instance = null;
}
},
data: function() {
return {
instance: null,
text: ''
};
},
methods: {
change: function() {
this.text = this.instance.getData();
this.$emit('input', this.text);
},
},
mounted: function() {
this.instance = CKEDITOR.replace(this.id, {
extraPlugins: 'divarea',
initialData: this.value,
readOnly: this.readonly,
autoParagraph: false,
entities: false
});
this.instance.on('change', this.change);
},
watch: {
value: function(val, oldval) {
if(val !== oldval && val !== this.text ) {
this.instance.setData(val);
}
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment