vue-quill-editor的詳細(xì)配置與使用

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

  1. 字體大小無法設(shè)置
  2. 工具欄樣式錯位
  3. 圖片上傳報錯
  4. 編輯器高度無法設(shè)置
    ........
    經(jīng)過參考多篇博客烫扼,終于解決了所有問題曙求,網(wǎng)上資料雖然很多,但是都沒有完全適用的映企,比較零碎悟狱,這里我將自己的經(jīng)驗(yàn)分享一下,希望可以幫助到有需要的人堰氓。下面是效果圖:


    1641565632939_3B625783-D0CC-42e8-A196-44691018F936.png

完整代碼

<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'
// 設(shè)置字體大小
const fontSizeStyle = Quill.import('attributors/style/size') // 引入這個后會把樣式寫在style上
fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px']
Quill.register(fontSizeStyle, true)
// 設(shè)置字體樣式
const Font = Quill.import('attributors/style/font') // 引入這個后會把樣式寫在style上
const fonts = [
    'SimSun',
    'SimHei',
    'Microsoft-YaHei',
    'KaiTi',
    'FangSong'
]
Font.whitelist = fonts // 將字體加入到白名單
Quill.register(Font, true)
// 工具欄
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線 刪除線 -----['bold', 'italic', 'underline', 'strike']
    [{ color: [] }, { background: [] }], // 字體顏色挤渐、字體背景顏色-----[{ color: [] }, { background: [] }]
    [{ align: [] }], // 對齊方式-----[{ align: [] }]
    [{ size: fontSizeStyle.whitelist }], // 字體大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ font: fonts }], // 字體種類-----[{ font: [] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題
    [{ direction: 'ltl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)-----[{ indent: '-1' }, { indent: '+1' }]
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ script: 'sub' }, { script: 'super' }], // 上標(biāo)/下標(biāo)-----[{ script: 'sub' }, { script: 'super' }]
    ['blockquote', 'code-block'], // 引用  代碼塊-----['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: {
                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
                        // 獲取光標(biāo)所在位置
                        // 插入圖片,res為服務(wù)器返回的圖片鏈接地址
                        quill.insertEmbed(length, 'image', filPath + item)
                        // 調(diào)整光標(biāo)到最后
                        quill.setSelection(length + 1)
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss">
.vue-quill-editor {
  .quill-editor{
    line-height: normal;
    .ql-container.ql-snow{
        line-height: normal !important;
        height: 550px !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: '標(biāo)題1';
            }
            .ql-picker-label[data-value="2"]::before,
            .ql-picker-item[data-value="2"]::before {
                content: '標(biāo)題2';
            }
            .ql-picker-label[data-value="3"]::before,
            .ql-picker-item[data-value="3"]::before {
                content: '標(biāo)題3';
            }
            .ql-picker-label[data-value="4"]::before,
            .ql-picker-item[data-value="4"]::before {
                content: '標(biāo)題4';
            }
            .ql-picker-label[data-value="5"]::before,
            .ql-picker-item[data-value="5"]::before {
                content: '標(biāo)題5';
            }
            .ql-picker-label[data-value="6"]::before,
            .ql-picker-item[data-value="6"]::before {
                content: '標(biāo)題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;
    }
  }
  }
</style>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末囤攀,一起剝皮案震驚了整個濱河市软免,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌焚挠,老刑警劉巖膏萧,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蝌衔,居然都是意外死亡榛泛,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進(jìn)店門胚委,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挟鸠,“玉大人叉信,你說我怎么就攤上這事亩冬。” “怎么了?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵硅急,是天一觀的道長覆享。 經(jīng)常有香客問我,道長营袜,這世上最難降的妖魔是什么撒顿? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮荚板,結(jié)果婚禮上凤壁,老公的妹妹穿的比我還像新娘。我一直安慰自己跪另,他們只是感情好拧抖,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著免绿,像睡著了一般唧席。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上嘲驾,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天淌哟,我揣著相機(jī)與錄音,去河邊找鬼辽故。 笑死徒仓,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的榕暇。 我是一名探鬼主播蓬衡,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼彤枢!你這毒婦竟也來了狰晚?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤缴啡,失蹤者是張志新(化名)和其女友劉穎壁晒,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體业栅,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡秒咐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了碘裕。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片携取。...
    茶點(diǎn)故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖帮孔,靈堂內(nèi)的尸體忽然破棺而出雷滋,到底是詐尸還是另有隱情不撑,我是刑警寧澤,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布晤斩,位于F島的核電站焕檬,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏澳泵。R本人自食惡果不足惜实愚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望兔辅。 院中可真熱鬧腊敲,春花似錦、人聲如沸维苔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蕉鸳。三九已至乎赴,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間潮尝,已是汗流浹背榕吼。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留勉失,地道東北人羹蚣。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像乱凿,于是被迫代替她去往敵國和親顽素。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內(nèi)容