Quill编辑器自定义字体和字体大小

场景由于官方自带的字体大小只有Samll,Normal,Large,Huge这四种,在实际开发中肯定是不满足要求的,此时我们需要手动修改下载的本地仓库中的相关js和css,需要注意的是,在生产环境部署中,需要在本地打包上传,不然恢复默认状态Quill编辑器的使用1. 引入依赖cnpm install vue-quill-editor2. 页面代码<quill-editor...

窝窝头十块钱四个

3572人浏览 · 2020-10-09 17:19:53

窝窝头十块钱四个 · 2020-10-09 17:19:53 发布

场景

由于官方自带的字体大小只有Samll,Normal,Large,Huge这四种,在实际开发中肯定是不满足要求的,此时我们需要手动修改下载的本地仓库中的相关js和css,

需要注意的是,在生产环境部署中,需要在本地打包上传,不然恢复默认状态

Quill编辑器的使用

1. 引入依赖

cnpm install vue-quill-editor

2. 页面代码

```html

全局样式设置toolbarOptions.js ```js const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'], [{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}], [{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'size': ['10px', '12px', '14px','16px','18px','20px','24px','26px','32px','48px'] }], [{'header': [1, 2, 3, 4, 5, 6, false]}], [{'color': []}, {'background': []}],
[{'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif']}], [{'align': []}], ['link', 'image', 'video'], ['clean']
] export default toolbarOptions

```

3. 样式修改

1. 改动1

修改字体大小,文件路径在 *\node_modules\quill\dist路径下的quill.core.js 文件里大概在6115行,可以直接搜索size修改 js var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', { scope: _parchment2.default.Scope.INLINE, whitelist: ['10px', '12px', '14px','16px','18px','20px','24px','26px','32px','48px'] }); var SizeStyle = new _parchment2.default.Attributor.Style('size', 'font-size', { scope: _parchment2.default.Scope.INLINE, whitelist: ['10px', '12px', '14px','16px','18px','20px','24px','26px','32px','48px'] });

2. 改动2

文件路径在 *\node_modules\quill\dist路径下的quill.js 文件里修改 ```js var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', { scope: _parchment2.default.Scope.INLINE, whitelist: ['10px', '12px', '14px','16px','18px','20px','24px','26px','32px','48px'] }); var SizeStyle = new _parchment2.default.Attributor.Style('size', 'font-size', { scope: _parchment2.default.Scope.INLINE, whitelist: ['10px', '12px', '14px','16px','18px','20px','24px','26px','32px','48px'] });

```

3. 改动3

文件路径在 *\node_modules\quill\dist路径下的quill.core.css 文件里中添加 ```css .ql-editor .ql-size-10px { font-size: 10px; } .ql-editor .ql-size-12px { font-size: 12px; } .ql-editor .ql-size-14px { font-size: 14px; } .ql-editor .ql-size-16px { font-size: 16px; } .ql-editor .ql-size-18px { font-size: 18px; } .ql-editor .ql-size-20px { font-size: 20px; } .ql-editor .ql-size-24px { font-size: 24px; } .ql-editor .ql-size-26px { font-size: 26px; } .ql-editor .ql-size-32px { font-size: 32px; } .ql-editor .ql-size-48px { font-size: 48px; }

```

文件路径在 *\node_modules\quill\dist路径下的quill.bubble.css 文件里中添加 css .ql-editor .ql-size-10px { font-size: 10px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { font-size: 10px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { content: '10px'; } .ql-editor .ql-size-12px { font-size: 12px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { font-size: 12px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12px'; } .ql-editor .ql-size-14px { font-size: 14px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { font-size: 14px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14px'; } .ql-editor .ql-size-16px { font-size: 16px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { font-size: 16px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16px'; } .ql-editor .ql-size-18px { font-size: 18px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { font-size: 18px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18px'; } .ql-editor .ql-size-20px { font-size: 20px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { font-size: 20px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: '20px'; } .ql-editor .ql-size-24px { font-size: 24px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { font-size: 24px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24px'; } .ql-editor .ql-size-26px { font-size: 26px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { font-size: 26px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { content: '26px'; } .ql-editor .ql-size-32px { font-size: 32px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { font-size: 32px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32px'; } .ql-editor .ql-size-48px { font-size: 48px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { font-size: 48px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { content: '48px'; }

文件路径在 *\node_modules\quill\dist路径下的quill.snow.css文件里中添加

```css .ql-editor .ql-size-10px { font-size: 10px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { content: '10px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { font-size: 10px; } .ql-editor .ql-size-12px { font-size: 12px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { font-size: 12px; } .ql-editor .ql-size-14px { font-size: 14px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { font-size: 14px; } .ql-editor .ql-size-16px { font-size: 16px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { font-size: 16px; } .ql-editor .ql-size-18px { font-size: 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="18px"]::before { font-size: 18px; } .ql-editor .ql-size-20px { font-size: 20px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: '20px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { font-size: 20px; } .ql-editor .ql-size-24px { font-size: 24px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { font-size: 24px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { content: '26px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { font-size: 26px; } .ql-editor .ql-size-32px { font-size: 32px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { font-size: 32px; }.ql-editor .ql-size-64px { font-size: 64px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { content: '48px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { font-size: 48px; }

```

4. 最终效果

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...