vue-quill-editor如何設(shè)置字體大小
更新時(shí)間：2022年04月29日 10:58:37 作者：yilaisai
這篇文章主要介紹了vue-quill-editor如何設(shè)置字體大小，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue-quill-editor設(shè)置字體大小
項(xiàng)目中需要用到富文本編輯器，用的Vue，所以選擇了vue-quill-editor這個(gè)富文本編輯器，發(fā)現(xiàn)字體只有幾種大小可以選擇，滿足不了產(chǎn)品的需求，研究了半天終于改好了。主要是需要更改配置文件，以及對(duì)應(yīng)的CSS和js文件。
editor.vue 頁面下改變 toolbarOptions的配置項(xiàng)
（editor.vue就是封裝的富文本編輯器）
const toolbarOptions = [
// ?原本是 'small',fasle,'large','huge'，改成自己想要設(shè)置的大小，這會(huì)改變頁面下拉框的個(gè)數(shù)以及每個(gè)選項(xiàng)的data-value值，插件的js會(huì)根據(jù)data-value的值去增加對(duì)應(yīng)的class類名。?
[{'size': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}],?
]再到node_modules下面找到 quill, 對(duì)目錄dist 下面的 css文件和 js文件進(jìn)行修改。
quill.core.js 下面
// small,large,huge 這三個(gè)是默認(rèn)的，可以刪可以留。后面必須增加和editor配置項(xiàng)一樣。 whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
quill.js 下面
// 跟quill.core.js 同理，修改下面兩項(xiàng),huge及之前都是默認(rèn)的 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選項(xiàng)，需要注意的是data-value=如果是接數(shù)字要有引號(hào)，字符串可以不帶引號(hào)
//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選項(xiàng)
.ql-editor .ql-size-10px {
? ? font-size: 10px;
}quill.snow.css 下面
// 需要全部增加一下css選項(xiàng)
.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ái)管理系統(tǒng)編輯富文本，前臺(tái)頁面展示出來(沒引用vue-quill-editor)，前臺(tái)頁面別忘了引用改動(dòng)后的css文件哦！
vue-quill-editor 樣式問題
引入snow.css，在需要展示的頁面中用如下元素包裹即可
<div class="ql-container ql-snow"> ? ? <div class="ql-editor" v-html="content"> ? ? </div> </div>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue2中實(shí)現(xiàn)dialog的封裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Emit是Vue3中另一種常見的組件間傳值方式,它通過在子組件中觸發(fā)事件并將數(shù)據(jù)通過事件參數(shù)傳遞給父組件來實(shí)現(xiàn)數(shù)據(jù)傳遞,本文就來介紹一下Vue3 emit傳值,感興趣的可以了解一下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選和反選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)及滾動(dòng)監(jiān)聽的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)及滾動(dòng)監(jiān)聽的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue出現(xiàn)did you register the component
這篇文章主要介紹了Vue出現(xiàn)did you register the component correctly?解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
優(yōu)化Vue項(xiàng)目編譯文件大小的方法步驟
這篇文章主要介紹了優(yōu)化Vue項(xiàng)目編譯文件大小的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能(案例代碼)
這篇文章主要介紹了vue3??mark.js?實(shí)現(xiàn)文字標(biāo)注功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
vue2結(jié)合element-ui的gantt圖實(shí)現(xiàn)可拖拽甘特圖
因?yàn)楣ぷ髦幸玫礁侍貓D,所以我在網(wǎng)上搜索可以用的甘特圖,搜索了好多,但是網(wǎng)上搜到大多數(shù)都很雞肋,不能直接使用,下面這篇文章主要給大家介紹了關(guān)于vue2結(jié)合element-ui的gantt圖實(shí)現(xiàn)可拖拽甘特圖的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue watch immediate方法用法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目優(yōu)化的示例
本文主要介紹了vue項(xiàng)目完成后如何實(shí)現(xiàn)項(xiàng)目優(yōu)化的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12