插件名称 | vueditor |
---|---|
发布时间 | 2021年1月12日 |
插件作者 | hifarer |
Vueditor是用vue.js 2和Vuex.js 2编写的简单,轻巧的所见即所得文本编辑器。
npm install vueditor
适用于以下场景:
import Vue from 'vue'
import Vuex from 'vuex'
import Vueditor from 'vueditor'
import 'vueditor/dist/style/vueditor.min.css'
// 编辑器配置
let config = {
toolbar: [
'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor'
],
fontName: [
{val: 'arial black'},
{val: 'times new roman'},
{val: 'Courier New'}
],
fontSize: ['12px', '14px', '16px', '18px', '0.8rem', '1.0rem', '1.2rem', '1.5rem', '2.0rem'],
uploadUrl: ''
};
Vue.use(Vuex);
Vue.use(Vueditor, config);
// 创建根实例
new Vue({
el: '#editorContainer'
});
然后在*.vue的template某一处:
<template>
<div>
...
<Vueditor></Vueditor>
</div>
</template>
获取和设置内容需要先拿到上一步<Vueditor></Vueditor>
生成的组件,可以通过$children[index]
和 ref
获取到。
let parent = new Vue({
el: '#editorContainer'
});
let inst = parent.$children[0];
inst.setContent('your content here');
inst.getContent();
createEditor
适用于多个Vueditor实例,分别传参。
import Vue from 'vue'
import Vuex from 'vuex'
import {createEditor} from 'vueditor'
import 'vueditor/dist/style/vueditor.min.css'
Vue.use(Vuex);
createEditor('#editorContainer', {
toolbar: [
'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor',
],
uploadUrl: '',
id: '',
classList: []
});
注意这种用法会替换掉被初始化的那个元素,如果要添加样式到该元素可以在config里面加上classList
或 id
来实现;createEditor
返回一个Vueditor实例,通过该实例可以获取和设置内容:
let inst = createEditor(...);
inst.setContent('your content here');
inst.getContent();