Angular7 富文本编辑器ngx-quill

用 ngx-quill 把传统的多行文本输入框(textarea)替换为可视化的富文本.
参考地址：https://www.cnblogs.com/scott-j/p/9016027.html
quill的GitHub地址：https://github.com/quilljs/quill
ngx-quill的GitHub地址：https://github.com/KillerCodeMonkey/ngx-quill

ngx-quill适用于版本号在2以及以上的angular。

具体操作如下：
1、npm安装：

①ngx-quill的安装
angular >= 5时ngx-quill的安装
npm install ngx-quill
angular < 5时
npm install [email protected]

②quill的安装
npm install quill

2、quill的配置
①Module

  import { QuillModule } from 'ngx-quill';
  imports: [
    QuillModule  //旧版的
    QuillModule.forRoot()  //新版的要这么引入
  ]

② 在index.html中添加quill的样式 :
旧版本（不推荐或已淘汰）：

更新于2019年12月12日：

最近quill的样式有新版本，旧版本1.00样式使用会出现不显示的问题。
新版本：

3、使用
在页面使用标签进行使用，效果如下：

image.png

①[email protected]：
使用的是style

②[email protected]：
使用的是styles

附上常用配置代码：

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']                         // link and image, video
    ]
  };

https://www.jianshu.com/p/a7ded48ac974
https://github.com/surmon-china/ngx-quill-editor/issues/24