雨凡技术栈

富文本插件ngx-quill的使用

1、安装

  • npm install --save ngx-quill
  • 安装@angular/core，@angular/common，@angular/forms，@angular/platform-browser，quill和rxjs等同行的依赖性插件

npm install --save quill必须安装此依赖

2、在index.html引入css

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

3、在模块中引入

import { QuillModule } from 'ngx-quill';

@NgModule({
  imports: [
    ...
    QuillModule
    ...
  ],
})
export class xxxModule { }
1
2
3
4
5
6
7
8
9
10

4、在对应的html中引入

<quill-editor 
  (onEditorCreated)="EditorCreated($event)" 
  [(ngModel)]='textDetail'>
</quill-editor>
1
2
3
4

5、在component中实现图片上传的处理器

public editor;

EditorCreated(quill) {
    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, image/x-icon');
    Imageinput.classList.add('ql-image');
    Imageinput.addEventListener('change', () => {
      const file = Imageinput.files[0];
      const data: FormData = new FormData();
      data.append('file', file, file.name);
      const header = new Headers();
      header.append('Accept', 'application/json');
      const options = new RequestOptions({ headers: header });
      if (Imageinput.files != null && Imageinput.files[0] != null) {
        this.http.post('http://xxxx/upload', data, options)
        .map(res => res.json())
        .subscribe(res => {
          const range = this.editor.getSelection(true);
          const index = range.index + range.length;
          this.editor.insertEmbed(range.index, 'image', 'http://'+res.url);
        });
      }
    });
    Imageinput.click();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

6、自定义菜单项

<quill-editor>
  <div quill-editor-toolbar>
    <span class="ql-formats">
      <select class="ql-font">
        <option value="aref">Aref Ruqaa</option>
        <option value="mirza">Mirza</option>
        <option selected>Roboto</option>
      </select>
      <select class="ql-align" [title]="'Aligment'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      <select class="ql-align" [title]="'Aligment2'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
    </span>
    <span class="ql-formats">
      <div id="counter"></div>
    </span>

    <span class="ql-formats">

      <button type="button" class="ql-header" value="1"></button>
    </span>

    <span class="ql-formats">

      <button type="button" class="ql-header" value="2"></button>
    </span>

    <span title="超链接" class="ql-formats">
      <button type="button" class="ql-link"></button>
    </span>
  </div>
</quill-editor>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

← Angular Library 快速入门 →