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.
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();
Options for configuration for Vuejs WYSIWYG Editor | |
Name [Type] | Description |
---|---|
toolbar [Object] | Buttons on the toolbar, use ` |
fontName [Object] | The font-family select’s choices, val confer with the particular css worth, abbr confer with the option’s text, abbr is elective once equals to val |
id [String] | id for the rendered editor element |
fontSize [Array] | The font-size select’s options |
emoj [Array] | The emoji list, you’ll be able to get full list here |
lang String | Interface language, default is Chinese, to line to English use lang: 'en' |
mode [String] | Mode options: default , iframe |
classList [Array] | className for the rendered editor element |
iframePath [String] | If mode is ready to iframe , specify a HTML file path here |
fileUploadUrl [String] | File transfer uniform resource locator, the come result should be a string confer with the uploaded image, leave it empty can find yourself with native preview |