<template>
  <quill-editor
    v-model="content"
    ref="editorRef"
    :options="editorOption"
    @focus="onEditorFocus($event)"
    @blur="onEditorBlur($event)"
    @change="onEditorChange($event)"
    class="editor"
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
import "../../assets/css/quillEditor.css";
import * as Quill from "quill";
//quill编辑器的字体
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
// 自定义字号的大小
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: sizes }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: fonts }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ['link', 'image', 'video'], // 链接、图片、视频-----
export default {
  name: "TestQuillEditor",
  components: { quillEditor },
  data() {
    return {
      content: "",
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.editorRef.quillEditor;
  methods: {
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange({ html }) {
      //内容改变事件
</script>
<style>
</style>
本篇文章讲述了如何增加quill-editor的字体和文字大小，下篇文章将介绍如何二次封装quill-editor。
先引入 Quill，然后手写样式
import Quill from 'quill' // 需要引入quill才可以设置自定义字体大小
import VueQuillEditor from 'vue-quill-editor'
import './style/font-size.css' // 需要自己手写的css，对应下面的字号
const Size = Quill.import('attributors/style/size') 
Size.whitelist = ['12px', '
  由于官方自带的字体大小只有Samll,Normal,Large,Huge这四种,在实际开发中肯定是不满足要求的,此时我们需要手动修改下载的本地仓库中的相关js和css,需要注意的是,在生产环境部署中,需要在本地打包上传,不然恢复默认状态
Quill编辑器的使用
1. 引入依赖
cnpm install vue-quill-editor
2. 页面代码
 <quill-editor...
                                    前端常遇到的一个情况是要做自适应的页面，但是有时候文字定了font-size后屏幕大小变化但是文字不跟着变。但是设置rem之类的也麻烦，这里就给一个简单的方法实现。
写法：利用css的自动计算方法calc
font-size:calc(100vw * 100 / 1920); 
解释一下：
calc：是一个css自带的计算方法，可以自动计算后返回px单位的值
100vw：vw是屏幕的宽度。也就是百分百屏幕宽度。
*100：这里乘的100代表100px。
1920：设计稿的宽度
比如：我的需求是屏幕上要一个
                                    在此之前，你需要安装好vue-quill-editor，可以看我另外一篇文章修改vue-quill-editor的配置项const toolbarOptions  = [// 大家如果想要更多的字体大小，可以自行增加[{'size': ['12px','16px' , '20px']}],]在node_modules下面找到 quill, 对目录dist 下面的 css文件和 js文件进行修改//...