我的步骤：

1、安装依赖

npm i ngx-quill
npm i quill

2、模块引入

这里的引入，一般放在app.module.ts里

import { QuillModule } from 'ngx-quill';

@NgModule({
  declarations: [FileComponent],
  imports: [
    CommonModule,
    ……
    QuillModule.forRoot() // 新版的要这么引入
  ]
})

3、css引入

在 index.html 页面上引用

<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">

4、使用

/* 直接使用 */
<quill-editor></quill-editor>

/* 模板绑定 */
<quill-editor [(ngModel)]="content"></quill-editor>

5、使用升华-----编辑器配置选项

/* html页面 */
 <quill-editor [(ngModel)]="editorContent" [modules]="config"   [styles]="{height: '250px'}" ></quill-editor>

/* ts页面 */
 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
    ]
  };

6、使用升华-----图片上传前编辑

问题：这个插件的插入图片，得到的是base64，而base64字符串太长太大了，提交时太耗时间
解决：用富文本插入图片时，就调用上传图片的接口，得到这个图片的http地址（接口返回的），放到img的src里，提交时，提交的是这个带有http的images的标签，渲染没问题
大致代码：

<quill-editor [(ngModel)]="editorContent" (onEditorCreated)="EditorCreated($event)"   [styles]="{height: '250px'}" ></quill-editor>

EditorCreated(quill: any): void {
    const toolbar = quill.getModule('toolbar');
    toolbar.addHandler('image', this.imageHandler.bind(this));
    this.editor = quill;
  }


  // tslint:disable-next-line:typedef
  imageHandler() {
    const Imageinput: any = document.createElement('input');
    console.log(Imageinput);
    Imageinput.setAttribute('type', 'file');
    Imageinput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
    Imageinput.classList.add('ql-image');
    Imageinput.addEventListener('change', () => {
      console.log('上传图片');
      const file1 = Imageinput.files[0];
      const formData: FormData = new FormData();
      formData.append(file1.name, file1);
      if (Imageinput.files != null && Imageinput.files[0] != null) {
      // 图片上传
        this.common.fileUpload('/project/ProjectInfoAttachment/UploadMultipleProfile', formData)
          .subscribe(
            (res: any) => {
              if ( res.body.code === 200) {
              // 得到图片的id ---> res.body.data
                const paras: any = {
                  profileId: res.body.data
                };
                // 得到图片的http地址（我这的接口不能直接给地址，要转换下）
                this.common.GetProjectInfoAttachment(paras).then((res2: any) => {
                  if (res2.code === 200) {
                  // 这个是关键，必写
                    this.editor.insertEmbed(this.editor.getSelection(true).index, 'image', res2.data[0].filepath);
                  }
                }).catch();
              }
            },
            () => {
              this.message.error('上传失败');
            }
          );
      }
    });
    Imageinput.click();
  }