element-ui 富文本编辑器实现

element-ui 富文本编辑器实现

在项目中需要用到一个富文本编辑器，这里选择的是vue-quill-editor参考网站

        <el-form-item label="内容" prop="abstract">
          <editor ref="myTextEditor"
              v-model="ruleForm.content"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)">
          </editor>  
        </el-form-item>

这里需要的是，参考网站中有一个地方有误，见图：

这里的config应该写成:options，注意是有s的喔，大家可以去github看看，就是速度有点感人:(，
还有需要注意的是toolbar的配置选项，直接上图了：

需要注意的是外层需要有modules和一个数组包裹，然后在:options="editorOption"添加，少一个都不会成功的喔。下面的是github官网里面的toolbar配置选项（应该是全部的吧）

    export default {
      theme: 'snow',
      boundary: document.body, 
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'script': 'sub' }, { 'script': 'super' }],
          [{ 'indent': '-1' }, { 'indent': '+1' }],
          [{ 'direction': 'rtl' }],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'font': [] }],
          [{ 'align': [] }],
          ['clean'],
          ['link', 'image', 'video']
        ]
      },
      placeholder: 'Insert text here ...',
      readOnly: false
    }

这里就不解释各个的意思了，大家可以自己试试。祝大家工作顺利！！