angular引入富文本ngx-quill，自定义图片上传

1. 安装依赖

npm i ngx-quill
npm i quill

ps：一定要安装 quill ，不然ngx-quill会报Can't resolve 'quill' in xxxx, 因为ngx-quill内部引用了quill。

2. 使用

1. 引用

/* 在自己的`NgModule`的`imports`里面引用 */
import { QuillModule } from 'ngx-quill';
@NgModule({
  imports: [
    ...
    QuillModule.forRoot()
    ...
  ]
})

2. 使用组件

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

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

/* 响应式表单 */
<quill-editor formControlName="content"></quill-editor>

点击查看quill配置地址

3. css 样式引用

/* 在 index.html 页面上引用 */
<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">

点击查看其他css版本

3. 自定义图片上传

给组件添加 onEditorCreated 方法，获取quill对象，并绑定自定义图片上传函数

html:
<quill-editor  (onEditorCreated)="EditorCreated($event)"></quill-editor>

ts:
  // 富文本初始化钩子函数
  EditorCreated(quill: any) {
    // 获取quill的工具栏对象
    const toolbar = quill.getModule('toolbar');
    // 给工具栏的image功能添加自定义函数，注意this指向问题
    toolbar.addHandler('image', this.imageHandler.bind(this));
    // 保存quill对象
    this.editor = quill;
  }
  // 自定义图片上传功能
  // 创建一个input对象来实现上传，除了下面的自定义代码区域，其他为官方代码
  imageHandler() {
    const Imageinput = document.createElement('input');
    Imageinput.setAttribute('type', 'file');
    Imageinput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp'); // 可改上传图片格式
    Imageinput.classList.add('ql-image');
    Imageinput.addEventListener('change', () => {
      const file = Imageinput.files[0];
      if (Imageinput.files != null && Imageinput.files[0] != null) {
          const formData = new FormData();
          formData.append('file', file)
          this.res.post("服务器的上传图片接口",formData).subscribe(res=>{
            if(res.code === 200){
              // 下面这句话必填，成功后执行 （imageUrl 为上传成功后的图片完整路径）
              this.editor.insertEmbed(this.editor.getSelection(true).index, 'image', imageUrl);
            }else{
             	// 失败返回
            }
          })
      }
    });
    Imageinput.click();
  }

无注释复制粘贴版本

html:
<quill-editor  (onEditorCreated)="EditorCreated($event)"></quill-editor>

ts:
  EditorCreated(quill: any) {
    const toolbar = quill.getModule('toolbar');
    toolbar.addHandler('image', this.imageHandler.bind(this));
    this.editor = quill;
  }
  imageHandler() {
    const Imageinput = document.createElement('input');
    Imageinput.setAttribute('type', 'file');
    Imageinput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp');
    Imageinput.classList.add('ql-image');
    Imageinput.addEventListener('change', () => {
      const file = Imageinput.files[0];
      if (Imageinput.files != null && Imageinput.files[0] != null) {
         const formData = new FormData();
          formData.append('file', file)
          this.res.post("服务器的上传图片接口",formData).subscribe(res=>{
            if(res.code === 200){
              this.editor.insertEmbed(this.editor.getSelection(true).index, 'image', imageUrl);
            }else{
            }
         })
      }
    });
    Imageinput.click();
  }