首先在Angular6项目中安装富文本编辑器的依赖：
1、angular >= 5时ngx-quill的安装：
npm install ngx-quill
2、angular < 5时：
npm install [email protected]
然后在使用到富文本编辑器的模块中，引入ngx-quill的QuillModule：
例如：在message-management.module.ts中引入：
import { NgModule } from '@angular/core';
import { MessageRoutingModule, MessageComponents } from './message-management-routing.module';
import { SharedModule } from '../../../../shared/shared.module';
// import zorroAnt
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { QuillModule } from 'ngx-quill'; // 引入富文本编辑器模块
import { PublishNewsProvider } from '../../../../providers/business/message-center/publish-news/publish-news-provider';
import { MesManagementProvider } from '../../../../providers/business/message-center/mes-management/mes-management-provider';
@NgModule({
imports: [
MessageRoutingModule,
NgZorroAntdModule,
SharedModule,
QuillModule // 富文本编辑器模块
],
declarations: [
...MessageComponents
],
providers: [
PublishNewsProvider,
MesManagementProvider
]
})
export class MessageManagementModule { }
在index.html中添加quill的样式 :
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">接下来在组件和页面中使用富文本编辑器：
页面上：
<div nz-row style="margin-bottom: 10px;margin-left: 200px">
<div nz-col [nzSpan]="16">
<ng-container>
<nz-form-item nzFlex style="margin-bottom: 0px;">
<!-- <nz-form-label nz-col [nzRequired]="!isReadOnly" [nzSpan]="4"></nz-form-label> -->
</nz-form-item>
</ng-container>
<quill-editor [style]="{height: '300px'}" (onEditorCreated)="EditorCreated($event)" [(ngModel)]="content"
placeholder="请输入公告内容" (onContentChanged)="contentChanged($event)">
<div quill-editor-toolbar>
<span class="ql-formats">
<!-- 加粗 -->
<button class="ql-bold" [title]="'Bold'"></button>
</span>
<select class="ql-align" [title]="'Aligment'">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
<!-- 加入图片 -->
<button class="ql-image" [title]="'Aligment3'"></button>
<!-- 更改颜色 -->
<select class="ql-color">
<option selected="selected"></option>
<option value="#e60000"></option>
<option value="#ff9900"></option>
<option value="#ffff00"></option>
<option value="#008a00"></option>
<option value="#0066cc"></option>
<option value="#9933ff"></option>
<option value="#ffffff"></option>
<option value="#facccc"></option>
<option value="#ffebcc"></option>
<option value="#ffffcc"></option>
<option value="#cce8cc"></option>
<option value="#cce0f5"></option>
<option value="#ebd6ff"></option>
<option value="#bbbbbb"></option>
<option value="#f06666"></option>
<option value="#ffc266"></option>
<option value="#ffff66"></option>
<option value="#66b966"></option>
<option value="#66a3e0"></option>
<option value="#c285ff"></option>
<option value="#888888"></option>
<option value="#a10000"></option>
<option value="#b26b00"></option>
<option value="#b2b200"></option>
<option value="#006100"></option>
<option value="#0047b2"></option>
<option value="#6b24b2"></option>
<option value="#444444"></option>
<option value="#5c0000"></option>
<option value="#663d00"></option>
<option value="#666600"></option>
<option value="#003700"></option>
<option value="#002966"></option>
<option value="#3d1466"></option>
</select>
<!-- 字体大小 -->
<select class="ql-size">
<option value="small"></option>
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<!--上标、下标按钮-->
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
<button type="button" class="ql-italic"></button>
<!-- 下划线 -->
<button type="button" class="ql-underline"></button>
<!-- 删除线 -->
<button type="button" class="ql-strike"></button>
<!-- 列表显示 -->
<button type="button" class="ql-list" value="ordered"></button>
<!-- 缩进 -->
<button type="button" class="ql-indent" value="-1"></button>
<button type="button" class="ql-indent" value="+1"></button>
<!-- 背景颜色 -->
<select class="ql-background">
<option value="#000000"></option>
<option value="#e60000"></option>
<option value="#ff9900"></option>
<option value="#ffff00"></option>
<option value="#008a00"></option>
<option value="#0066cc"></option>
<option value="#9933ff"></option>
<option selected="selected"></option>
<option value="#facccc"></option>
<option value="#ffebcc"></option>
<option value="#ffffcc"></option>
<option value="#cce8cc"></option>
<option value="#cce0f5"></option>
<option value="#ebd6ff"></option>
<option value="#bbbbbb"></option>
<option value="#f06666"></option>
<option value="#ffc266"></option>
<option value="#ffff66"></option>
<option value="#66b966"></option>
<option value="#66a3e0"></option>
<option value="#c285ff"></option>
<option value="#888888"></option>
<option value="#a10000"></option>
<option value="#b26b00"></option>
<option value="#b2b200"></option>
<option value="#006100"></option>
<option value="#0047b2"></option>
<option value="#6b24b2"></option>
<option value="#444444"></option>
<option value="#5c0000"></option>
<option value="#663d00"></option>
<option value="#666600"></option>
<option value="#003700"></option>
<option value="#002966"></option>
<option value="#3d1466"></option>
</select>
<!-- 字体 -->
<select class="ql-font">
<option selected="selected">标准字体</option>
<option value="serif">衬线字体</option>
<option value="monospace">等宽字体</option>
</select>
<!-- 清除按钮 -->
<button type="button" class="ql-clean"></button>
<!-- 链接 -->
<button type="button" class="ql-link"></button>
</div>
</quill-editor>
</div>
</div>组件中富文本编辑器生成的内容绑定的字段为content：
/**
* ngx-quill上传图片需要的方法
*/
EditorCreated(quill) {
const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', this.imageHandler.bind(this));
this.editor = quill;
}
/**
* ngx-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 headers = new HttpHeaders();
headers.append('Accept', 'application/json');
const headerOptions = { headers: headers };
if (Imageinput.files != null && Imageinput.files[0] != null) {
this.http.post(this.image_upload_url, data, headerOptions)
.subscribe(res => {
const range = this.editor.getSelection(true);
const index = range.index + range.length;
this.editor.insertEmbed(range.index, 'image', _.get(res, 'data', ''));
});
}
});
Imageinput.click();
}
/**
* 富文本编辑器quill-editor内容变化时change事件
*/
contentChanged(event) {
this.content = event.html; // 内容编辑
}