quill富文本編輯器自定義字體、文字大小（編輯器內含element上傳組件）

如下是我們需要得到的文字大小和字體的效果:

 

 

 

自定義字體、文字大小JS部分：

//引入Qill插件
import Quill from "quill";

// 自定義字體

let fontFamily = ['宋體', '黑體', '微軟雅黑', '楷體', '仿宋', 'Arial', '蘋方'];

Quill.imports['attributors/style/font'].whitelist = fontFamily;

Quill.register(Quill.imports['attributors/style/font']);

// 自定義文字大小
let fontSize = ['10px', '12px', '14px', '16px', '20px', '24px', '36px']
Quill.imports['attributors/style/size'].whitelist = fontSize;
Quill.register(Quill.imports['attributors/style/size']);

const toolbarOptions = [
  [
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "code-block",
    { header: 1 },
    { header: 2 },
    { list: "ordered" },
    { list: "bullet" },
    { indent: "-1" },
    { indent: "+1" },
    { script: "sub" }, // 下標
    { script: "super" }, // 上標
    { align: [] },
    { color: [] },
    { background: [] },
    "link",
    "image",
  ],
  [{ size: fontSize }], // 文字大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標題
  [{ font: fontFamily }], // 字體
];

 

自定義字體、文字大小css部分：

/*
  文字大小
*/
.ql-snow .ql-picker.ql-size{
  width: 70px;  // 菜單欄占比寬度
}
.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-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-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-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-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-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-label[data-value='36px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
  content: '36px';
}

/*
  字體
*/
.ql-snow .ql-picker.ql-font{
  width: 80px;  // 菜單欄占比寬度
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='宋體']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='宋體']::before {
  content: '宋體';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='黑體']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='黑體']::before {
  content: '黑體';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='微軟雅黑']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='微軟雅黑']::before {
  content: '微軟雅黑';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='楷體']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='楷體']::before {
  content: '楷體';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='仿宋']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='仿宋']::before {
  content: '仿宋';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
  content: 'Arial';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='蘋方']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='蘋方']::before {
  content: '蘋方';
}

 

組件完整代碼（含element上傳組件功能）：

<template>
  <div>
    <!-- 圖片上傳組件輔助-->
    <el-upload
      id="upload"
      class="editor-upload"
      :action="uploadUrl"
      :data="uploadData"
      name="file"
      :headers="headers"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </el-upload>

    <!-- 富文本編輯器 -->
    <quill-editor
      class="editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
      @ready="ready($event)"
    >
    </quill-editor>
  </div>
</template>

<script>
  //引入Qill插件
  import Quill from "quill";

  // 自定義字體
  let fontFamily = ['宋體', '黑體', '微軟雅黑', '楷體', '仿宋', 'Arial', '蘋方'];
  Quill.imports['attributors/style/font'].whitelist = fontFamily;
  Quill.register(Quill.imports['attributors/style/font']);

  // 自定義文字大小
  let fontSize = ['10px', '12px', '14px', '16px', '20px', '24px', '36px']
  Quill.imports['attributors/style/size'].whitelist = fontSize;
  Quill.register(Quill.imports['attributors/style/size']);

  // 新增行高
  let Parchment = Quill.import("parchment");
  let lingHeight = ['initial', '1', '1.5', '1.75', '2', '3', '4'];
  class lineHeightAttributor extends Parchment.Attributor.Style {}
  const lineHeightStyle = new lineHeightAttributor("lineHeight", "line-height", {
    scope: Parchment.Scope.INLINE,
    whitelist: lingHeight
  });
  Quill.register({ "formats/lineHeight": lineHeightStyle }, true);

  // 對齊方式樣式都改成style方式，而不是class
  let Align = Quill.import('attributors/style/align');
  Align.whitelist = ['right', 'center', 'justify'];
  Quill.register(Align, true);

  const toolbarOptions = [
    [
      "bold",
      "italic",
      "underline",
      "strike",
      "blockquote",
      "code-block",
      { header: 1 },
      { header: 2 },
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" },
      { script: "sub" }, // 下標
      { script: "super" }, // 上標
      { align: [] },
      { color: [] },
      { background: [] },
      "link",
      "image",
    ],
    [{ size: fontSize }], // 文字大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標題
    [{ font: fontFamily }], // 字體
    [{ lineheight: lingHeight }]   // 行高
  ];
  export default {
    name: "Editor",
    data() {
      return {
        content: null,
        uploadUrl: 'http://',  // 上傳圖片接口地址
        headers: { Authorization: "Bearer " + "TOKEN" },
        editorOption: {
          modules: {
            toolbar: {
              container: toolbarOptions,
              handlers: {
                // 編輯器菜單點擊圖片上傳事件
                image: function (value) {
                  console.log(value)
                  if (value) {
                    // 調用element上傳組件
                    document.querySelector("#upload input").click();
                  }
                },
                lineheight: function (value) {
                  if (value) {
                    this.quill.format('lineHeight', value);
                  } else {
                    console.log(value);
                  }
                }
              },
            },
          },
        },
      };
    },
    computed: {
      // 圖片上傳額外的參數
      uploadData() {
        return { type: 1, id: '2' };
      },
    },
    methods: {
      // 失去焦點事件
      onEditorBlur() {
        this.$emit("on-blur", this.content);
      },
      onEditorFocus() {
        //獲得焦點事件
      },
      // 內容改變事件
      onEditorChange() {      
        this.$emit("on-blur", this.content);
      },
      ready() {
        Quill.register({ 'formats/lineHeight': lineHeightStyle }, true);
      },
      // 上傳圖片前
      beforeUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上傳圖片不能大於 2M");
        }
      },
      // 上傳圖片成功
      uploadSuccess(res) {
        if (res.code == 200) {
          let img = `<img src="https:${res.data.url}" />`;
          this.content = (this.content || "") + img;
        }
      },
      // 上傳圖片失敗
      uploadError(res) {
        console.log(res);
      },
      // 更新文本編輯器內容
      upDateContent(v) {
        this.content = v;
      },
    },
  };
</script>

<style lang="scss" scoped>
  /deep/ .quill-editor{
    width: 1000px;
    .ql-container {
      height: 300px;
    }
    .editor-upload {
      display: none;
    }
    /*
      文字大小
    */
    .ql-snow .ql-picker.ql-size{
      width: 70px;  // 菜單欄占比寬度
    }
    .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-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-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-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-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-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-label[data-value='36px']::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
      content: '36px';
    }

    /*
      字體
    */
    .ql-snow .ql-picker.ql-font{
      width: 80px;  // 菜單欄占比寬度
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='宋體']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='宋體']::before {
      content: '宋體';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='黑體']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='黑體']::before {
      content: '黑體';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='微軟雅黑']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='微軟雅黑']::before {
      content: '微軟雅黑';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='楷體']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='楷體']::before {
      content: '楷體';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='仿宋']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='仿宋']::before {
      content: '仿宋';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
      content: 'Arial';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='蘋方']::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='蘋方']::before {
      content: '蘋方';
    }

    /*
      標題  
    */
    .ql-snow .ql-picker.ql-header{
      width: 80px;  // 菜單欄占比寬度
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: "文本" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: "標題1" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: "標題2" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: "標題3" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: "標題4" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: "標題5" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: "標題6" !important;
    }
    //配置編輯器行高
    .ql-snow .ql-picker.ql-lineheight {
      width: 70px;  // 菜單欄占比寬度
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
      content: '行高';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='initial']::before {
      content: '默認';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
      content: '1';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
      content: '1.5';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {
      content: '1.75';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
      content: '2';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
      content: '3';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
      content: '4';
    }
    .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
      content: '5';
    }
  }
</style>

 

 

開源項目地址：https://gitee.com/chenswei/vue-customize-quill