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)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
一般我們的前端Vue項(xiàng)目中都會(huì)涉及到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目部署跨域問題的詳細(xì)解決過程,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue+echarts繪制折線圖、柱狀圖和扇形圖教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Teleport是一個(gè)內(nèi)置組件，它可以將一個(gè)組件內(nèi)部的一部分模板“傳送”到該組件的?DOM?結(jié)構(gòu)外層的位置去，本文就來介紹一下如何使用，感興趣的可以了解一下2023-05-05
這篇文章主要介為大家詳細(xì)紹了vue實(shí)現(xiàn)微信分享功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
Vue項(xiàng)目打包部署到GitHub Pages的實(shí)現(xiàn)步驟
本文主要介紹了Vue項(xiàng)目打包部署到GitHub Pages的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vuex如何在非組件中調(diào)用mutations方法
這篇文章主要介紹了vuex如何在非組件中調(diào)用mutations方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue+vue-router轉(zhuǎn)場動(dòng)畫的實(shí)例代碼
今天小編就為大家分享一篇vue+vue-router轉(zhuǎn)場動(dòng)畫的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09