Star
You must be signed in to star a gist
CKEditor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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