富文本编辑器quill-editor的使用，vue2引入quill-editor

提示：vue2引入quill-editor

---

前言

需求：富文本编辑器

一、安装

npm install vue-quill-editor --save
npm install quill-image-resize-module --save

二、引用

1、 edit.vue

<template>
  <div>
   <Editer ref="editerRef" @change="changeEdit"/>
  </div>
</template>

<script>
import Editor from './Editor'
export default {
  components:{ Editor },
  data() {
    return {};
  },
  methods: {
    //编辑器修改内容
   changeEdit(){},
  },
};
</script>

三、编辑器

1、Editor.vue

<template>
  <div class="">
    <quill-editor class="editer_box"
       ref="quillEditorRef"
        v-model="content"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        @change="onEditorChange($event)">
     </quill-editor>
  </div>
</template>
<script>
import * as Quill from 'quill';
const Size = Quill.import('attributors/style/size');
Size.whitelist = [false, '10px','12px', '14px', '16px', '20px', '24px', '32px'];
Quill.register(Size, true);
const Font = Quill.import('attributors/style/font');
Font.whitelist = [false, 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', '宋体', '黑体'];
Quill.register(Font, true);
export default {
   computed: {
     editor() {
       return this.$refs.quillEditorRef.quillEditor;
     }
   },
   data() {
     return {
       content: null,
       editorOption: {
         modules: {
           toolbar: {
             container: [
               ['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: Size.whitelist }], // 字体大小
               // [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
               [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
               [{ font: Font.whitelist }], // 字体种类
               [{ align: [] }], // 对齐方式
               ['clean'], // 清除文本格式
               ['image'] // 图片
           ],
           handlers: {
             'image': (value) => {
               // 执行图片上传操作
	           //上传成功回调 uploadImageSuccess
             }
           }
          }
         },
         placeholder: '请在这里添加产品描述', //提示
         readyOnly: false, //是否只读
         theme: 'snow', //主题 snow/bubble
         syntax: true, //语法检测
       }
     }
   },
   mounted() {
     //  自定义粘贴图片功能
     let quill = this.$refs.quillEditorRef.quill;
     quill.root.addEventListener( "paste", evt => {
       if ( evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length ) {
         evt.preventDefault();
         [].forEach.call(evt.clipboardData.files, file => {
           if (file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
             console.log(file,'粘贴进来的图片文件~~~');
             // 调用上传图片接口，传输file
             //上传成功回调 uploadImageSuccess
           }
         });
       }
     },false);
   },
   methods: {
     // 失去焦点
     onEditorBlur(editor) {},
     // 获得焦点
     onEditorFocus(editor) {},
     // 开始
     onEditorReady(editor) {},
     // 值发生变化
     onEditorChange(editor) {
       this.content = editor.html;
       this.$emit('change',this.content);
     },
     //上传成功
     uploadImageSuccess(data) {
       this.addImgByIndex(data.url||'');
     },
     addImgByIndex(src){
       // 获取光标所在位置
       let quill = this.$refs.quillEditorRef.quill;
       let length = quill.getSelection().index;
       // 插入图片  
       quill.insertEmbed(length, 'image', src);
       // 调整光标到最后
       quill.setSelection(length + 1);
     },
   },
 }
</script>

<style>
.editer_box .ql-container {
  height: 400px;
}
.editer_box .ql-picker.ql-size .ql-picker-label::before,
.editer_box .ql-picker.ql-size .ql-picker-item::before {
    content: "默认字号";
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: '10px';
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: '12px';
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: "14px";
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px";
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20px";
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
    content: "24px";
}
.editer_box .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.editer_box .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
	content: "32px";
}
 .editer_box .ql-picker.ql-font .ql-picker-label::before,
 .editer_box .ql-picker.ql-font .ql-picker-item::before {
    content: "默认字体";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="宋体"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="宋体"]::before {
    content: "宋体";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="黑体"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="黑体"]::before {
    content: "黑体";
}
.editer_box .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.editer_box .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋";
}
</style>

四、效果

飞机直达官网：【quill-editor】官网

总结

踩坑路漫漫长@~@