angular整合ngx-quill，设置自定义字体

1.安装依赖

	// 安装 quill
	npm install quill -save

	// 安装 ngx-quill
	npm install ngx-quill -save

2.在对应的模块中引入QuillModule模块

例如：在app.module.ts中引入

3.在index.html中引入css

注意：quill是那个版本这里引入的css就用那个版本

4.使用

html

 <quill-editor [(ngModel)]="comments" [styles]="{'min-height':'250px'}" [modules] = "this.modules" (paste)="onPaste($event)" (onEditorCreated)="EditorCreated($event)" (onContentChanged)="onContentChanged($event)">
    </quill-editor>

ts

import { QuillModules } from 'ngx-quill';
  modules: QuillModules = {
    clipboard: {
      matchVisual: true
    },
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // 加粗、斜体、下划线、删除线
      [{ header: 1 }, { header: 2 }], // 标题 1、标题 2
      ['blockquote', 'code-block'], // 引用、代码块
      [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表、无序列表
      [{ script: 'sub' }, { script: 'super' }], // 下标、上标
      [{ indent: '-1' }, { indent: '+1' }], // 减少缩进、增加缩进
      [{ direction: 'rtl' }], // 从右到左
      [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
      [{ color: [] }, { background: [] }], // 字体颜色、背景色
      [{ font: this.fontFamily }], // 字体
      [{ align: [] }], // 对齐方式
      ['clean'], // 清除格式
      ['link', 'image'], // 链接、图片
    ]
  }

5.其他

1.回显样式不生效
一定要加上class="ql-editor"该类名，否则样式也不起作用
2.js 去除Quill富文本编辑器的首尾空行,空格

  removeLeadingTrailingSpaces() {
    // 获取编辑器内容
    const content = this.editor;
     // 去除首尾空行和空格
    const trimmedContent = content.replace(/^\s+|\s+$/g, '');
     // 更新编辑器内容
    this.editor.setContent(trimmedContent);
  }

3.自定义字体没生效

	import * as Quill from 'quill';
  // 自定义字体
  fontFamily = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
  Quill.imports['attributors/style/font'].whitelist = this.fontFamily;
  Quill.register(Quill.imports['attributors/style/font']);

一、先创建一个名为font的.css文件,然后引入自定义css

// 字体样式大小
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
    content: "宋体";
    font-family: "SimSun";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    content: "黑体";
    font-family: "SimHei";
}
.ql-snow
    .ql-picker.ql-font
    .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow
    .ql-picker.ql-font
    .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑";
    font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体";
    font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋";
    font-family: "FangSong";
}
.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";
    font-family: "Arial";
}
.ql-snow
    .ql-picker.ql-font
    .ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow
    .ql-picker.ql-font
    .ql-picker-item[data-value="Times-New-Roman"]::before {
    content: "Times New Roman";
    font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
    content: "sans-serif";
    font-family: "sans-serif";
}

.ql-font-SimSun {
    font-family: "SimSun";
}
.ql-font-SimHei {
    font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
    font-family: "KaiTi";
}
.ql-font-FangSong {
    font-family: "FangSong";
}
.ql-font-Arial {
    font-family: "Arial";
}
.ql-font-Times-New-Roman {
    font-family: "Times New Roman";
}
.ql-font-sans-serif {
    font-family: "sans-serif";
}

二、在angular.json引入font.css文件，进行覆盖默认样式

   "styles": [
              "node_modules/quill/dist/quill.snow.css",
              "src/assets/font/font.css",
              "src/styles.less"
            ]