最近工作中需求使用一款富文本編輯器，經(jīng)過再三比較選擇了vue-quill-editor，之所以選擇vue-quill-editor，是看上了它的輕量以及外觀簡潔的優(yōu)勢。打開官方文檔，直接上手配置，各種報錯，踩了很多坑，遇到的主要問題有以下幾個

1、字體大小無法設置
2、工具欄樣式錯位
3、編輯器高度無法設置
4、斜體工具無效
........
經(jīng)過參考多篇博客，終于解決了所有問題，網(wǎng)上資料雖然很多，但是都沒有完全適用的，比較零碎，這里我將自己的經(jīng)驗分享一下，希望可以幫助到有需要的人。下面是效果圖：

image.png

【官方文檔地址】https://www.kancloud.cn/liuwave/quill/1409378

代碼：

<template>
    <div class="vue-quill-editor">
        <quill-editor
            ref="mwQuillEditor"
            v-model="html"
            :options="editorOption"
        />
    </div>
</template>

<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// import SelectImages from '@/components/SelectImages/index'

// 設置字體大小
const fontSizeStyle = Quill.import('attributors/style/size') // 引入這個后會把樣式寫在style上
fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px']
Quill.register(fontSizeStyle, true)

// 設置字體樣式
const Font = Quill.import('attributors/style/font') // 引入這個后會把樣式寫在style上
const fonts = [
    'Microsoft-YaHei',
    'SimSun',
    'SimHei',
    'KaiTi',
    'FangSong'
]
Font.whitelist = fonts // 將字體加入到白名單
Quill.register(Font, true)

// 工具欄
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線 刪除線 -----['bold', 'italic', 'underline', 'strike']
    // [{ align: [] }], // 對齊方式----- 手動展開[{ align: [] }]
    [{ align: '' }, { align: 'center' }, { align: 'right' }], // 對齊方式----- 默認展開
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ indent: '-1' }, { indent: '+1' }], // 縮進-----[{ indent: '-1' }, { indent: '+1' }]
    [{ size: fontSizeStyle.whitelist }], // 字體大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ font: fonts }], // 字體種類-----[{ font: [] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標題
    [{ direction: 'ltl' }, { direction: 'rtl' }], // 文本方向-----[{'direction': 'ltl'}]  [{'direction': 'rtl'}]
    [{ script: 'sub' }, { script: 'super' }], // 上標/下標-----[{ script: 'sub' }, { script: 'super' }]
    [{ color: [] }, { background: [] }, 'blockquote', 'clean'], // 字體顏色、字體背景顏色-----[{ color: [] }, { background: [] }]
    // ['blockquote'], //  引用  代碼塊-----['blockquote', 'code-block']
    // ['clean'], // 清除文本格式-----['clean']
    // ['link', 'image', 'video'] // 鏈接、圖片、視頻-----['link', 'image', 'video']
]


export default {
    name: 'VueQuillEditor',
    components: {
        quillEditor
    },
    props: {
        value: {
            type: [Number, Object, Array, String],
            default: ''
        }
    },
    data () {
        return {
            html: this.value,
            editorOption: {
                placeholder: '請輸入內容',
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: this.handleImgUpload
                        }
                    }
                }
            },
            isShow: false
        }
    },
    watch: {
        html: {
            handler (newValue) {
                this.$emit('input', newValue)
            },
            deep: true
        },
        value: {
            handler (newValue, oldValue) {
                if (newValue !== oldValue) this.html = newValue
            },
            deep: true
        }
    },
    mounted () {
        this.initMounted()
    },
    methods: {
        initMounted () {
            setTimeout(() => {
                this.isShow = true
            }, 100)
        },

        handleImgUpload () {
            const { quill } = this.$refs.mwQuillEditor
            SelectImages({
                visible: true,
                multi: true,
                showButton: true,
                maxMulti: 18,
                success: (data, filPath) => {
                    for (const item of data) {
                        const length = quill.getSelection(true).index
                        // 獲取光標所在位置
                        // 插入圖片，res為服務器返回的圖片鏈接地址
                        quill.insertEmbed(length, 'image', filPath + item)
                        // 調整光標到最后
                        quill.setSelection(length + 1)
                    }
                }
            })
        },
        upload(){

        },
    },
}
</script>
<style lang="less">
em {
    font-style: italic;  /* 解決斜體失效問題 */
}
.vue-quill-editor {
  .quill-editor{
    line-height: normal;
    .ql-container.ql-snow{
        line-height: normal !important;
        height: 250px !important;
        font-size:14px;
    }
    .ql-snow {
        .ql-tooltip[data-mode=link]::before {
            content: "請輸入鏈接地址:";
        }
        .ql-tooltip.ql-editing a.ql-action::after {
            border-right: 0px;
            content: '保存';
            padding-right: 0px;
        }
        .ql-tooltip[data-mode=video]::before {
            content: "請輸入視頻地址:";
        }
        .ql-picker.ql-size {
            .ql-picker-label[data-value="12px"]::before,
            .ql-picker-item[data-value="12px"]::before {
                content: '12px';
            }
            .ql-picker-label[data-value="14px"]::before,
            .ql-picker-item[data-value="14px"]::before {
                content: '14px';
            }
            .ql-picker-label[data-value="16px"]::before,
            .ql-picker-item[data-value="16px"]::before {
                content: '16px';
            }
            .ql-picker-label[data-value="18px"]::before,
            .ql-picker-item[data-value="18px"]::before {
                content: '18px';
            }
            .ql-picker-label[data-value="20px"]::before,
            .ql-picker-item[data-value="20px"]::before {
                content: '20px';
            }
            .ql-picker-label[data-value="24px"]::before,
            .ql-picker-item[data-value="24px"]::before {
                content: '24px';
            }
            .ql-picker-label[data-value="28px"]::before,
            .ql-picker-item[data-value="28px"]::before {
                content: '28px';
            }
            .ql-picker-label[data-value="32px"]::before,
            .ql-picker-item[data-value="32px"]::before {
                content: '32px';
            }
            .ql-picker-label[data-value="36px"]::before,
            .ql-picker-item[data-value="36px"]::before {
                content: '36px';
            }
        }
        .ql-picker.ql-header {
            .ql-picker-label::before,
            .ql-picker-item::before {
                content: '文本';
            }
            .ql-picker-label[data-value="1"]::before,
            .ql-picker-item[data-value="1"]::before {
                content: '標題1';
            }
            .ql-picker-label[data-value="2"]::before,
            .ql-picker-item[data-value="2"]::before {
                content: '標題2';
            }
            .ql-picker-label[data-value="3"]::before,
            .ql-picker-item[data-value="3"]::before {
                content: '標題3';
            }
            .ql-picker-label[data-value="4"]::before,
            .ql-picker-item[data-value="4"]::before {
                content: '標題4';
            }
            .ql-picker-label[data-value="5"]::before,
            .ql-picker-item[data-value="5"]::before {
                content: '標題5';
            }
            .ql-picker-label[data-value="6"]::before,
            .ql-picker-item[data-value="6"]::before {
                content: '標題6';
            }
        }
        .ql-picker.ql-font{
            .ql-picker-label[data-value="SimSun"]::before,
            .ql-picker-item[data-value="SimSun"]::before {
                content: "宋體";
                font-family: "SimSun" !important;
            }
            .ql-picker-label[data-value="SimHei"]::before,
            .ql-picker-item[data-value="SimHei"]::before {
                content: "黑體";
                font-family: "SimHei";
            }
            .ql-picker-label[data-value="Microsoft-YaHei"]::before,
            .ql-picker-item[data-value="Microsoft-YaHei"]::before {
                content: "微軟雅黑";
                font-family: "Microsoft YaHei";
            }
            .ql-picker-label[data-value="KaiTi"]::before,
            .ql-picker-item[data-value="KaiTi"]::before {
                content: "楷體";
                font-family: "KaiTi" !important;
            }
            .ql-picker-label[data-value="FangSong"]::before,
            .ql-picker-item[data-value="FangSong"]::before {
                content: "仿宋";
                font-family: "FangSong";
            }
        }
    }
    .ql-align-center{
      text-align: center;
    }
    .ql-align-right{
      text-align: right;
    }
    .ql-align-left{
      text-align: left;
    }
  }
  .ql-snow .ql-picker.ql-size{
      width: 58px;
  }
  .ql-snow .ql-picker.ql-font{
      width: 80px;
  }
  .ql-snow .ql-picker.ql-header{
      width: 58px;
  }
  .ql-snow .ql-picker{
      font-size: 13px;
  }
  }
</style>