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

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  44  =  53

We accept paid advance and paid guest Posting on our Site : Contact US