A wysiwyg editor written in Vue.js and Vuex.js, only support Vue.js 2.x.x
No jQuery or Bootstrap needed.
Browser compatibility: Chrome, Firefox, Safari, IE 9+.
Online demo
How to use
import Vue from 'vue'
import Vuex from 'vuex'
import Vueditor, {createEditor} from 'path/to/vueditor.min.js';
// your config here
let config = {
toolbar: [
'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor', 'divider',
'bold', 'italic', 'underline', 'strikeThrough', 'links', 'divider', 'subscript', 'superscript',
'divider', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', '|', 'indent', 'outdent',
'insertOrderedList', 'insertUnorderedList', '|', 'emoji', 'picture', 'tables', '|', 'switchView'
],
lang: 'en', // default is Chinese, to set to English, fill this with 'en'
mode: 'default', // options: default | iframe
iframePath: '', // fill this if 'mode: iframe'
fileuploadUrl: '' // your file upload url, the return result must be a string refer to the uploaded image, leave it empty will end up with local preview
};1. Only one editor required or multiple editors required but shared the same config, use it like this:
Vue.use(Vuex);
Vue.use(Vueditor, config);
// create a root instance
new Vue({
el: '#editor1'
});Then in your vue template somewhere:
<template>
<div>
...
<Vueditor></Vueditor>
</div>
</template>To get and set content you need to aquire the Vueditor component, you can use $children[index] or ref to do that.
let parent = new Vue({
el: '#editor1'
});
let inst = parent.$children[0];
inst.setContent('your content here');
inst.getContent();2.
Multiple editors required, call createEditor and pass specific config as parameter respectively:
createEditor('#editor2', {
toolbar: [
'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor',
],
lang: 'en',
mode: 'default',
iframePath: '',
fileuploadUrl: '',
classList: [],
id: ''
});Note that the second usage will replace the element been initial with, in this case you can add classList or id to the config for adding styles, the rendered element will have these attributes. createEditor returns
a Vueditor instance, you can set and get content with it:
let inst = createEditor(...);
inst.setContent('your content here');
inst.getContent();
