• 安裝
  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: '請在此輸入內(nèi)容',
            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) {
                                // 調(diào)用上傳圖片組件社证，上傳到服務(wù)器钓简，將圖片回填富文本
                                document.querySelector('.ivu-upload .ivu-upload-input').click()
                            } else {
                                 // 不調(diào)用富文本圖片上傳乌妒，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])
            // 調(diào)整光標到最后
            quill.setSelection(pos + 1)
        }
  }
}

使用：http://www.reibang.com/p/a6cba69d6e49
上傳圖片：https://blog.csdn.net/qq_34568700/article/details/107498454
https://blog.csdn.net/mynewdays/article/details/105726120