Vueditor是用vue.js 2和Vuex.js 2编写的简单，轻巧的所见即所得文本编辑器。

特性

• 可自定义
• 轻量级, 依赖少
• 插件支持

安装和下载：

npm install vueditor

用法

Vue.use(Vueditor, config)

适用于以下场景:

1. 只需一个编辑器的情况
2. 一个页面有多个编辑器但配置相同

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(selector, config)

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

---

官网：https://github.com/hifarer/vueditor/blob/master/docs/chinese.md

演示：https://www.vue365.cn/code_demo.php?id=3869

GitHub下载：https://github.com/hifarer/vueditor/archive/master.zip