富文本编辑框vue-quill-editor的使用和优化

最近做了一个文章上传的项目，因为考虑到文章内容中有文字样式的需求和图片的插入，就做了一个富文本框的功能，我选择的插件就是vue-quill-editor，下边总结一下我在这里边踩过的坑和解决方案。分为两大部分来讲解，使用和优化

一、使用

1,下载插件 
          npm install vue-quill-editor --save

2，引用

          在vue的main.js文件中添加这两行代码，就是引用和使用

          import QuillEditor from 'vue-quill-editor'

          Vue.use(QuillEditor)

3，在插件中使用

     （1）html部分

        <el-form-item label="内容" :label-width="formLabelWidth">
          <quill-editor 
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" @ focus="onEditorFocus($event)" @change="onEditorChange($event)">
          </quill-editor>
        </el-form-item>

      （2）editorOption这个数据是工具栏的定义（图片是便于观看，图片下边附部分你需要的代码）

工具栏功能的常量，我这个不全，网上随便找，有的是

const toolbarOptions = [
              ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
              ['blockquote', 'code-block'],
              [{'list': 'ordered'}, {'list': 'bullet'}],
              [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
              [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
              [{'direction': 'rtl'}],                         // text direction
              [{'color': []}, {'background': []}],          // dropdown with defaults from theme
              [{'align': []}],
              ['image'],
              ['clean']                                         // remove formatting button
          ]

工具栏的定义，与html中的数据变量是一致就行

editorOption: {
                    placeholder: '',
                    theme: 'snow',  // or 'bubble'
                    modules: {
                           toolbar: {
                                  container: toolbarOptions,  // 工具栏
                           }
                   }
           }

4，内容处理

          quill-editor 得到的内容是由若干个<p></p>标签包裹的字符串，我们可以根据需求自行处理

二、优化

在使用过程中，发现了一个问题，这个富文本编辑器对图片的处理是把图片转换成base-64格式的，小小的一张图片就是一组很长的字符串，如果内容中有过多的图片，那就会发生412错误，就是上传的数据量过大，面对这种情况服务器可以设置增大限制上线，但是这种方案就会显的很low，还会对回显有不利影响。我想办法做了优化，把富文本编辑器的图片导入功能直接做了上传，之后我们富文本的内容中直接就变成<p><img src="xxxxxxxx"></p>,这样子大大减少了内容对服务器的损耗。下边直接上代码，具体的功能请自行琢磨

html代码中增加一个上传的功能

<el-form-item label="内容">
          <!-- 图片上传组件辅助-->
          <el-upload
              class="avatar-uploader quill-img"
              action="这里是你图片上传所访问的后台接口"
              :show-file-list="false"
              :on-success="uploadSuccess"
              >
          </el-upload>
          <!--富文本编辑器组件-->
          <quill-editor 
              v-model="nowData.content"
              ref="myQuillEditor"
              :options="editorOption"
               @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"@change="onEditorChange($event)">
          </quill-editor>
        </el-form-item>

data中对image这项功能做重写覆盖

editorOption: {
          placeholder: '',
          theme: 'snow',  // or 'bubble'
          modules: {
          toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    // 触发input框选择图片文件
                    document.querySelector('.quill-img input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
          }
          }
      }

methods中给上传成功的回调函数做处理

uploadSuccess(res) {  //把已经上传的图片显示回富文本编辑框中

        //res返回的格式是{url:"图片的路径"}，这个是后台接口返回的
        let quill = this.$refs.myQuillEditor.quill
        quill.focus();
        quill.insertEmbed(quill.getSelection().index, 'image', res.url);

    },

这回功能就做好了