angular项目引入ngx-quill富文本

本人开发时使用的angular版本为9.1.4
结合ngx-quill官方摸索

1. 先npm安装ngx-quill和quill
   npm install ngx-quill
   npm install quill

2. 然后module配置
   import { QuillModule } from 'ngx-quill';
   imports: [
   QuillModule.forRoot() // 新版的要这么引入
   ]
   2.1 安装@types/quill@1.3.10 （官方版本），否则报'Delta' has no exported
   npm install @types/quill@1.3.10
   2.2 angular.json的styles中引入样式：
   "./node_modules/quill/dist/quill.core.css",
   "./node_modules/quill/dist/quill.bubble.css", // 主题
   "./node_modules/quill/dist/quill.snow.css", // 主题
   "./node_modules/quill-emoji/dist/quill-emoji.css", // 表情
   "./node_modules/quill-mention/dist/quill.mention.min.css",
   "./node_modules/katex/dist/katex.min.css", // 算法fx

3. 然后就可以引入标签展示了
   <quill-editor></quill-editor>

4. 样式修改使用的是styles,属性名用小驼峰不叫引号，属性值要加引号
   <quill-editor [modules]="config" [styles]="{height: '250px'}" ></quill-editor>

5. 常用配置
   config = {
   toolbar: [
   ['bold', 'italic', 'underline', 'strike'], // toggled buttons
   ['blockquote', 'code-block'],
   [{ 'header': 1 }, { 'header': 2 }], // custom button values
   [{ 'list': 'ordered'}, { 'list': 'bullet' }],
   [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
   [{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
   [{ 'direction': 'rtl' }], // text direction
   [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
   [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
   [{ 'font': [] }],
   [{ 'align': [] }],
   ['clean'], // remove formatting button
   ['link', 'image', 'video']
   ['emoji'] // 引入表情
   ] };

6. 引入表情
   (1)npm install quill-emoji
   (2)ts 文件中引入： import 'quill-emoji/dist/quill-emoji.js';
   (3)angular.json的styles中引入："./node_modules/quill-emoji/dist/quill-emoji.css"
   (4)ts中的modules中定义： 'emoji-shortname': true,
   // 'emoji-textarea': true,
   'emoji-toolbar': true,

7. 图片大小控制
   (1)npm install quill-image-resize-module --save
   (2)npm install quill-mention --save
   (3)angular.json的styles中引入："./node_modules/quill-emoji/dist/quill-mention.css"
   (4)ts中的modules中定义： formula: true,
   imageResize: {}