使用vue-quill-deitor时,文本编辑器自动默认的文字大小分为:
1.small:10px
2:.large:18px
3.huge:32px
当我们想自定义显示的文字大小时,需要进行以下操作
一.引用quill-editor
<quill-editor v-else class="ql-editor" v-model="value" ref="quillEditor" :options="editorOption" :style="{ width: '100%', height: '400px' }" @change="change"
后,需要自定义editorOption,这时候我们需要先自定义一个数组,放置我们需要的字体大小并加入到白名单种:
let fontSize = [ '10px', '12px', '14px', '16px', '18px', '20px', '24px','36px','48px','52px']
Quill.imports['attributors/style/size'].whitelist = fontSize;
然后在editorOption中 定义size为:[{ size: fontSize}],
二.修改quill.snow.css
然后我们需要在项目的 node_modules的包里找到quill包,找到dist文件夹下quill.snow.css的文件,
复制出来,放置到assets/scss中存放.
在复制出来的文件中,搜索small/large/huge等字段会找到设置字体部分,增加/替换所需大小(下文以18px为例)
`.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before { content: '18px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18']::before { font-size: 18px; }`
剩下的字体大小依次增加/替换.
三.替换引用文件
使用quill-editor时,会引入样式文件(基础如图所示)
现在要替换掉我们更改的quill.snow.css文件,指定到我们刚才复制的文件地址(如图所示)
这样我们就可以在文本编译器中使用自定义字体大小了.
