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

3,426 阅读5分钟

场景

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

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

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;
}




4. 最终效果