vue富文本编辑器 Vue-Quill-Editor

主流富文本编辑器对比

前言：vue中很多项目都需要用到富文本编辑器，在使用了ueditor和tinymce后，发现并不理想。所以果断使用vue-quill-editor来实现。

1. wangEditor（国产，基于javascript和css开发的web富文本编辑器，开源免费）优势：轻量简介，最重要的是开源且中文文档齐全。缺点：更新不及时。没有强大的开发团队支撑。

2. UEditor（百度）优势：插件多，基本曼度各种需求，由百度web前端研发部开发。缺点：插件提交较大，网页加载速度相对就慢了些。使用复杂。属于前后端不分离插件。在使用时需要配置后端的一些东西，使用不便。

1. Kindeditor （） 优势：文档齐全，为中文，阅读方便。缺点：图片上传存在问题，上传历史过多，会全部加载，导致浏览器卡顿。

2. 补充：Tinymce也是一款不错的富文本编辑器，种植，各有优势和劣势，关键是选择一款最适合的就好。因为笔者在开发vue，所以直接使用vue-quill-editor较为方便些。具体看情况使用。

3. vue-quill-editor基本配置

   npm install vue-quill-editor -s

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

   使用

    需要注意的是toolbar的配置

     1. 只需要填写功能名的    

    加粗 - bold；
   
        斜体 - italic
   
        下划线 - underline
   
        删除线 - strike
   
        引用- blockquote
   
        代码块 - code-block
   
        公式 - formula
   
        图片 - image
   
        视频 - video
   
        清除字体样式- clean
   
        这一类的引用 直接['name','name']这种格式就好了

     2. 需要有默认值的

    标题 - header 
   
     [{ 'header': 1 }, { 'header': 2 }] 值字体大小
    
     列表 - list
     [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet
    
     上标/下标 - script
     [{ 'script': 'sub'}, { 'script': 'super' }],  值sub，super
    
     缩进 - indent
     [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等
    
     文本方向 - direction
     [{'direction':'rtl'}]

   结构 

   <template>
         <quill-editor class="editor"
                       ref="myTextEditor"
                       v-model="content"
                       :options="editorOption"
                       @blur="onEditorBlur($event)"
                       @focus="onEditorFocus($event)"
                       @ready="onEditorReady($event)"
                       @change="onEditorChange($event)">
         </quill-editor>
     </template>
     <script>
         export default {
           data () {
             return {
               content: null,
               editorOption: {
                 modules: {
                   toolbar: [
                     ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                     ["blockquote", "code-block"], // 引用  代码块
                     [{ header: 1 }, { header: 2 }], // 1、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: '请在这里添加产品描述', //提示
                 readyOnly: false, //是否只读
                 theme: 'snow', //主题 snow/bubble
                 syntax: true, //语法检测
               }
             }
           },
           methods: {
             // 失去焦点
             onEditorBlur(editor) {},
             // 获得焦点
             onEditorFocus(editor) {},
             // 开始
             onEditorReady(editor) {},
             // 值发生变化
             onEditorChange(editor) {
               this.content = editor.html;
               console.log(editor);
             },
           },
           computed: {
             editor() {
               return this.$refs.myTextEditor.quillEditor;
             }
           },
           mounted() {
             // console.log('this i