Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CKEditor
<!-- Based on https://github.com/dangvanthanh/vue-ckeditor -->
<template>
<div class="ckeditor">
<textarea :id="id" :value="value"></textarea>
</div>
</template>
<style scoped>
.ckeditor {
width: 100%;
clear: both;
}
</style>
<script>
if (process.BROWSER_BUILD) {
global.CKEDITOR_BASEPATH = '/admin/vendor/ckeditor/';
require('ckeditor');
}
export default{
props: {
value: {
type: String
},
config: {
type: Object,
default: () => {
},
},
id: {
type: String,
default: 'editor'
},
height: {
type: String,
default: '200px',
},
toolbar: {
type: Array,
default: () => [
{name: 'styles', items: ['Format']},
{name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', 'RemoveFormat']},
{
name: 'paragraph',
items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote']
},
{
name: 'alignment',
items: ['JustifyBlock', 'JustifyRight', 'JustifyCenter', 'JustifyLeft']
},
{name: 'links', items: ['Link', 'Unlink']},
{name: 'insert', items: ['Image', 'EmbedSemantic', 'Table']},
{name: 'clipboard', items: ['Paste', 'PasteText', 'PasteFromWord']},
],
},
language: {
type: String,
default: 'en'
},
extraplugins: {
type: String,
default: 'image2,justify,uploadimage'
},
uploadUrl: String,
},
beforeUpdate () {
if (this.value !== this.ckeditor.getData()) {
this.ckeditor.setData(this.value)
}
},
computed: {
ckeditor(){
return CKEDITOR.instances[this.id];
}
},
mounted () {
// Set config
const ckeditorConfig = Object.assign({}, {
// Define the toolbar: http://docs.ckeditor.com/#!/guide/dev_toolbar
toolbar: this.toolbar,
// Editor language
language: this.language,
// Editor height
height: this.height,
// Enabling extra plugins, available in the standard-all preset: http://ckeditor.com/presets-all
extraPlugins: this.extraplugins,
// Remove the default image plugin because image2, which offers captions for images, was enabled above.
removePlugins: 'image',
// Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
removeDialogTabs: 'image:advanced;link:advanced',
// Since we define all configuration options here, let's instruct CKEditor to not load config.js which it does by default.
// One HTTP request less will result in a faster startup time.
// For more information check http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-customConfig
customConfig: '',
// Reduce the list of block elements listed in the Format dropdown to the most commonly used.
format_tags: 'p;h1;h2;h3;pre',
// Define the list of styles which should be available in the Styles dropdown list.
// If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"
// (and on your website so that it rendered in the same way).
// Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor from loading
// that file, which means one HTTP request less (and a faster startup).
// For more information see http://docs.ckeditor.com/#!/guide/dev_styles
stylesSet: null,
uploadUrl: this.uploadUrl,
}, this.config);
CKEDITOR.replace(this.id, ckeditorConfig);
// Set value
this.ckeditor.setData(this.value);
// Handle on change
this.ckeditor.on('change', () => {
let ckeditorData = this.ckeditor.getData();
if (ckeditorData !== this.value) {
this.$emit('input', ckeditorData)
}
})
},
destroyed () {
if (!this.ckeditor) return;
this.ckeditor.destroy()
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment