vue-quill-editor如何設(shè)置字體大小
更新時間：2022年04月29日 10:58:37 作者：yilaisai
這篇文章主要介紹了vue-quill-editor如何設(shè)置字體大小，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-quill-editor設(shè)置字體大小
項目中需要用到富文本編輯器，用的Vue，所以選擇了vue-quill-editor這個富文本編輯器，發(fā)現(xiàn)字體只有幾種大小可以選擇，滿足不了產(chǎn)品的需求，研究了半天終于改好了。主要是需要更改配置文件，以及對應(yīng)的CSS和js文件。
editor.vue 頁面下改變 toolbarOptions的配置項
（editor.vue就是封裝的富文本編輯器）
const toolbarOptions = [
// ?原本是 'small',fasle,'large','huge'，改成自己想要設(shè)置的大小，這會改變頁面下拉框的個數(shù)以及每個選項的data-value值，插件的js會根據(jù)data-value的值去增加對應(yīng)的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=如果是接數(shù)字要有引號，字符串可以不帶引號
//10px,12px等等新設(shè)置的大小都要設(shè)置相應(yīng)的類名字體大小
.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：
如果后臺管理系統(tǒng)編輯富文本，前臺頁面展示出來(沒引用vue-quill-editor)，前臺頁面別忘了引用改動后的css文件哦！
vue-quill-editor 樣式問題
引入snow.css，在需要展示的頁面中用如下元素包裹即可
<div class="ql-container ql-snow"> ? ? <div class="ql-editor" v-html="content"> ? ? </div> </div>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
一般我們的前端Vue項目中都會涉及到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于vue項目部署跨域問題的詳細解決過程,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue+echarts繪制折線圖、柱狀圖和扇形圖教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)動態(tài)進度條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Teleport是一個內(nèi)置組件，它可以將一個組件內(nèi)部的一部分模板“傳送”到該組件的?DOM?結(jié)構(gòu)外層的位置去，本文就來介紹一下如何使用，感興趣的可以了解一下2023-05-05
這篇文章主要介為大家詳細紹了vue實現(xiàn)微信分享功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
Vue項目打包部署到GitHub Pages的實現(xiàn)步驟
本文主要介紹了Vue項目打包部署到GitHub Pages的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
vuex如何在非組件中調(diào)用mutations方法
這篇文章主要介紹了vuex如何在非組件中調(diào)用mutations方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue+vue-router轉(zhuǎn)場動畫的實例代碼
今天小編就為大家分享一篇vue+vue-router轉(zhuǎn)場動畫的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09