Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<!-- Based on -->
<div class="ckeditor">
<textarea :id="id" :value="value"></textarea>
<style scoped>
.ckeditor {
width: 100%;
clear: both;
if (process.BROWSER_BUILD) {
global.CKEDITOR_BASEPATH = '/admin/vendor/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()) {
computed: {
return CKEDITOR.instances[];
mounted () {
// Set config
const ckeditorConfig = Object.assign({}, {
// Define the toolbar:!/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:
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!/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!/guide/dev_styles
stylesSet: null,
uploadUrl: this.uploadUrl,
}, this.config);
CKEDITOR.replace(, ckeditorConfig);
// Set 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment