场景
由于官方自带的字体大小只有Samll,Normal,Large,Huge这四种,在实际开发中肯定是不满足要求的,此时我们需要手动修改下载的本地仓库中的相关js和css,
需要注意的是,在生产环境部署中,需要在本地打包上传,不然恢复默认状态
Quill编辑器的使用
1. 引入依赖
cnpm install vue-quill-editor
2. 页面代码
<quill-editor
v-model="form.details"
ref="editor"
:options="editorOption"
style="width:80%">
quill-editor>
<script>
import { mavonEditor } from 'mavon-editor'
//引入富文本组件
import { Quill, quillEditor } from 'vue-quill-editor'
//引入自定义字体样式font.css
import '../assets/css/font.css'
import 'mavon-editor/dist/css/index.css'
// 如果需要修改字体大小,下面三个文件都需要更改样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import toolbarOptions from "./commons/toolbarOptions"
export default {
data(){
return {
editorOption: {
placeholder: '请输入新闻内容',
theme: 'snow', //or bubble
modules: {
toolbar: {
container: toolbarOptions ,
handlers: {
image: function(value) {
if (value) {
document.querySelector('.avatar-uploader input').click()
} else {
this.Quill.formdata('image', false)
}
}
}
}
}
}
}
}
script>
复制代码全局样式设置 toolbarOptions.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修改
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 文件里修改
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 文件里中添加
.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 文件里中添加
.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 文件里中添加
.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;
}
复制代码