vue-quill-editor怎么設置字體大小

本篇內容介紹了“vue-quill-editor怎么設置字體大小”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

vue-quill-editor設置字體大小

項目中需要用到富文本編輯器，用的Vue，所以選擇了vue-quill-editor這個富文本編輯器，發現字體只有幾種大小可以選擇，滿足不了產品的需求，研究了半天終于改好了。主要是需要更改配置文件，以及對應的CSS和js文件。

editor.vue 頁面下改變 toolbarOptions的配置項

（editor.vue就是封裝的富文本編輯器）

const toolbarOptions = [
//  原本是 'small',fasle,'large','huge'，改成自己想要設置的大小，這會改變頁面下拉框的個數以及每個選項的data-value值，插件的js會根據data-value的值去增加對應的class類名。 
[{'size': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}], 
]

再到node_modules下面找到 quill, 對目錄dist 下面的 css文件和 js文件進行修改。

quill.core.js 下面

// small,large,huge 這三個是默認的，可以刪可以留。后面必須增加和editor配置項一樣。
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']

quill.js 下面

// 跟quill.core.js 同理，修改下面兩項,huge及之前都是默認的
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
var SIZES = ['small', false, 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px'];

quill.bubble.css 下面

// 需要全部增加一下css選項，需要注意的是data-value=如果是接數字要有引號，字符串可以不帶引號
//10px,12px等等新設置的大小都要設置相應的類名字體大小
.ql-editor .ql-size-8px {
    font-size: 8px;
}
// select選擇的字體大小
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    font-size: 8px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    content: '8px';    
}

quill.core.css 下面

// 需要全部增加一下css選項
.ql-editor .ql-size-10px {
    font-size: 10px;
}

quill.snow.css 下面

// 需要全部增加一下css選項
.ql-editor .ql-size-8px {
    font-size: 8px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    content: '8px';
}
// select選擇的字體大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    font-size: 8px;
}

tips：

如果后臺管理系統編輯富文本，前臺頁面展示出來(沒引用vue-quill-editor)，前臺頁面別忘了引用改動后的css文件哦！

vue-quill-editor 樣式問題

引入snow.css，在需要展示的頁面中用如下元素包裹即可

<div class="ql-container ql-snow">
    <div class="ql-editor" v-html="content">
    </div>
</div>

“vue-quill-editor怎么設置字體大小”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！