vue-quill-editor富文本编辑器使用

一、vue-quill-editor

1.vue项目中，npm安装依赖

npm install vue-quill-editor --save

2.全局引用，项目入口文件中（main.js）注册

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

局部引用

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data(){
	return{
	//自定义 toolbar 菜单
	editorOption: {  
	 modules: {
          toolbar: [xxx],
        },
        theme: "snow",
        placeholder: "请输入正文",
	 } 
	}
 }
}  //完成上述步骤之后即可使用

3.使用

<!-- 富文本编辑器 -->
    <quill-editor v-model="addForm.goods" :options="editorOption"  @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"  @change="onEditorChange($event)"></quill-editor>

v-model表示双向绑定的数据，并在data中的表单对象添加对应的属性中，这样在富文本中输入的任何内容都可以自动的添加到该属性中，并最终展示出下面的富文本编辑器内容

更多属性请看官网：https://www.npmjs.com/package/vue-quill-editor

二、wangEditor - 轻量级 web 富文本编辑器

npm 安装 npm i wangeditor --save ，几行代码即可创建一个编辑器。

import E from 'wangeditor'
const editor = new E('#div1')
editor.create()

demo

this.editor = new E(this.$refs.editor)
        // 配置菜单栏
        this.editor.config.menus = [
            "head", // 标题
            "bold", // 粗体
            "fontSize", // 字号
            "fontName", // 字体
            "italic", // 斜体
            "underline", // 下划线
            "strikeThrough", // 删除线
            "foreColor", // 文字颜色
            "backColor", // 背景颜色
            "indent", //缩进
            // "list", // 列表
            "justify", // 对齐方式
            //  "quote", // 引用
            // "undo", // 撤销
            // "redo", // 重复
        ]
        // 创建富文本编辑器
        this.editor.create()

文档地址https://www.wangeditor.com/doc/