ng2富文本编辑器|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 配置对象 // 改变输入框的值，触发事件 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标记语言注意事项

remark是含有标记语言的文本，所以使用下面的格式插入的html界面中
【ng2富文本编辑器|ng2富文本编辑器 Quill】5、注意，富文本编辑器作为一个专门的组件，在需要用到的地方，直接标签引用，所以他的值需要@Output()到父组件，还有在编辑信息的时候，文本框显示原来的值，需要从父组件中获取值, @Input()。