vue-quill-editor 富文本编辑器

• 安装
  npm install vue-quill-editor --save
• 使用（用富文本编辑器的vue组件）

<quill-editor ref="myQuillEditor" v-model="ruleForm.content" 
:options="editorOption"></quill-editor>
图片上传为公共组件
<imgUpload style="display: none;" @setUploadList="getUploadList"></imgUpload>

import { quillEditor } from 'vue-quill-editor'
// 富文本样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import imgUpload from '@/mobile/common/imgUpload'
export default {
    components: {
        quillEditor,
        imgUpload
    },
    data () {
      return {
        editorOption: {
            placeholder: '请在此输入内容',
            modules:{
                toolbar: {
                     container: [
                        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                        [{ header: 1 }, { header: 2 }], // 1、2 级标题
                        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                        [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                        [{ indent: '-1' }, { indent: '+1' }], // 缩进
                        [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                        [{ font: [] }], // 字体种类
                        [{ align: [] }], // 对齐方式
                        ['clean'], // 清除文本格式
                        ['link', 'image'] // 链接,图片
                    ],
                    handlers: {
                        'image': function (value) {
                            if (value) {
                                // 调用上传图片组件，上传到服务器，将图片回填富文本
                                document.querySelector('.ivu-upload .ivu-upload-input').click()
                            } else {
                                 // 不调用富文本图片上传，base64图片文件过大
                                this.quill.format('image', false);
                            }
                        }
                    }
                }
            }
        }
    }
  },
  methods: {
       // 上传图片后，添加到富文本中                
        getUploadList (url) {  // 子传父，获取上传图片
            const quill=this.$refs.myQuillEditor.quill
            // 获取光标位置
            const pos=quill.getSelection().index
            // 插入图片到光标位置
            quill.insertEmbed(pos,'image', url[url.length - 1])
            // 调整光标到最后
            quill.setSelection(pos + 1)
        }
  }
}

使用：https://www.jianshu.com/p/a6cba69d6e49
上传图片：https://blog.csdn.net/qq_34568700/article/details/107498454
https://blog.csdn.net/mynewdays/article/details/105726120