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

备注：我这里采用的是npm的安装模式配合vue-cli

1.安装：cnpm install vue-quill-editor --save

2.安装quill依赖：cnpm install quill --save

3.如何很多页面都需要用到，可以选择在main.js中引入，如下：

  import  VueQuillEditor from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  Vue.use(VueQuillEditor)

4.在项目中使用：

首先import:  import { quillEditor } from 'vue-quill-editor'

注册：components: {
             quillEditor
           },

html中使用：

       <el-form-item label="题目描述" label-width="100px">
          <quill-editor 
              v-model="taskInfo.desc"   //绑定的model，注意此时是html而非文本，引用时要用v-html
              ref="myQuillEditor" 
              :options="editorOption" //这里配置参数的，比如topbar

扫描二维码关注公众号，回复： 5440683 查看本文章

@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)"  //这三个是相应的获得/失去/改变的事件
              >
          </quill-editor>
        </el-form-item>

script中配置：

data(){

  return{

    editorOption:{
        modules:{
            toolbar:[
              ['bold','italic','clean']
            ]
        }
      },

}

填坑：在进行editorOption配置的时候，有的是需要有默认值的，如果不设置默认值，不会起作用，下面总结一下

不需要默认值的：

加粗 - bold；
斜体 - italic
下划线 - underline
删除线 - strike
引用- blockquote
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean

需要有默认值的 ：

标题 - header 
      列表 - list 
      上标/下标 - script 
      缩进 - indent
      文本方向 - direction
      大小 - size
      颜色 - color
      背景颜色 - background
      字体 - font
      文本对齐 - align

需要默认值的给个空值就ok不需要自己在去配置，格式如下

['bold','italic',{ 'color': [] },'clean']

备注：如果是用vue的话这个插件还是很不错的，但是文档不咋地好，如果是mvc的开发模式或者用vue多页面的话，可以尝试使用wangeditor这个富文本，很轻量