ng2富文本編輯器 Quill

一、安裝

npm install ng2-quill-editor --save

二、主模塊中引入

import { QuillEditorModule } from 'ng2-quill-editor';

@NgModule({
  // ...
  imports: [
    QuillEditorModule
  ],
  // ...
})
export class AppModule {}

三、組件中使用

A: 模板中（html）

// ngModel 雙休數據綁定，獲取富文本框中的數據
// config 配置對象
// 改變輸入框的值，觸發事件
<quill-editor [(ngModel)]="editorContent"
              [config]="editorConfig"
              (change)="onContentChanged($event)"></quill-editor>
              
B: 組件中

import { Component } from '@angular/core';

@Component({
  selector: "",
  templateUrl: ""
})
export class Sample{
  // 初始化值
  public editorContent = "";
  // 配置編輯器提醒文字
  public editorConfig = {
    placeholder: "輸入公告內容，支持html"
  };
  constructor() {}
  // 觸發事件 html標記語言， text文本
  onContentChanged({ html, text }) {
    console.log(html, text);
  }
}

四、 界面中使用html標記語言注意事項

<div innerHTML="{{data}}"></div>

remark是含有標記語言的文本，因此使用下面的格式插入的html界面中

五、注意，富文本編輯器做爲一個專門的組件，在須要用到的地方，直接標籤引用，因此他的值須要@Output()到父組件，還有在編輯信息的時候，文本框顯示原來的值，須要從父組件中獲取值, @Input()。