ng2富文本编辑器 Quill

大佬教程收集整理的这篇文章主要介绍了ng2富文本编辑器 Quill，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

1、安装

npm install ng2-quill-editor --save

2、主模块中引入

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

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

3、组件中使用

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);
  }
}

4、 界面中使用html标记语言注意事项

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

REMARK是含有标记语言的文本，所以使用下面的格式插入的html界面中

5、注意，富文本编辑器作为一个专门的组件，在需要用到的地方，直接标签引用，所以他的值需要@Output()到父组件，还有在编辑信息的时候，文本框显示原来的值，需要从父组件中获取值,@input()。

大佬总结

以上是大佬教程为你收集整理的ng2富文本编辑器 Quill全部内容，希望文章能够帮你解决ng2富文本编辑器 Quill所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。