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();
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