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