Vuejs WYSIWYG Editor-how to use Vuejs WYSIWYG Editor – Vuejs WYSIWYG Editor demo and example

Vuejs WYSIWYG Editor-how to use Vuejs WYSIWYG Editor – Vuejs WYSIWYG Editor demo and example

In this post we will show you how use Vuejs WYSIWYG Editor and demo and example for implement. Vueditor WYSIWYG Editor is a wysiwyg text editor based on vue and vuex. A wysiwyg editor written in Vue.js and Vuex.js, only support Vue.js 2.x.x. Browser compatibility: Firefox, Chrome, IE 9+, opera, Safari.

View Demo Git Download

Features for Vuejs WYSIWYG Editor

• No jQuery, Bootstrap or some other textual style document needed
• Light weighted, 55kb for js and 50kb for css
• Using .vue document advancement mode
• Based on npm + webpack + babel, utilizing ES2015

Installation for Vuejs WYSIWYG Editor

// vueditor install
npm install vueditor

In the event that you want to utilize it through script tag, simply include “vueditor.min.js”, “vueditor.min.css” to your page.

Use for Vuejs WYSIWYG Editor

Vue.use(Vueditor, config)

Utilize it in the accompanying cases for Vuejs WYSIWYG Editor

• Only one editorial manager required
• Multiple editors required yet had the same config

// import vue
import Vue from 'vue'
// import vuex
import Vuex from 'vuex'
// import vueditor
import Vueditor from 'vueditor'

// import css
import "vueditor/dist/css/vueditor.min.css"

// set config value here for wysiwyg
let config = {
// set config for toolbar
toolbar: [
'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor'
],
// set config for fontName
fontName: [
{val: "arial black"}, {val: "times new roman"}, {val: "Courier New"}
],
// set config for fontSize
fontSize: ['12px', '14px', '16px', '18px', '0.8rem', '1.0rem', '1.2rem', '1.5rem', '2.0rem'],
// set config for emoji
emoji: ["1f600", "1f601", "1f602", "1f923", "1f603"],
// set config for lang
lang: 'en',
mode: 'default',
iframePath: '',
fileuploadUrl: ''
};

Vue.use(Vuex);
Vue.use(Vueditor, config);
// root instance create
new Vue({
el: '#editor1'
});

Then in your vue template somewhere:

<template>
<div>
...
<Vueditor></Vueditor>
</div>
</template>

To get and set substance you have to get the Vueditor segment, you can utilize $children[index] or ref for Vuejs WYSIWYG Editor.

//Vuejs WYSIWYG Editor
//set editor1
let parent = new Vue({
el: '#editor1'
});
// set config inst
let inst = parent.$children[0];
// set content text
inst.setContent('add your content here');
// get content text
inst.getContent();

createEditor(selector, config)

Call createEditor and pass particular config as parameter separately for various editors in a page.

// Vuejs WYSIWYG Editor
// import vue
import Vue from 'vue'
// import vuex
import Vuex from 'vuex'
// import vueditor
import {createEditor} from 'vueditor'

// import css
import "vueditor/dist/css/vueditor.min.css"

// call vue
Vue.use(Vuex);

// set config value here for wysiwyg
createEditor('#editor2', {
toolbar: [
'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor',
],
// set config for lang
lang: 'en',
// set config for mode
mode: 'default',
// set config for iframePath
iframePath: '',
// set config for fileuploadUrl
fileuploadUrl: '',
id: '',
classList: []
});

for The instated component will be supplanted for this situation, you can add classList or id to the config for including styles, the rendered component will have these characteristics. createEditor gives back a Vueditor case, you can set and get content with it:

// Vuejs WYSIWYG Editor
// set config inst
let inst = createEditor(...);
// set content text
inst.setContent('add your content here');
// get content text
inst.getContent();