1、alain中自带的几款。

2、创建项目、创建组件后装载wangeditor。

npm i wangeditor

3、在ts中引入wangeditor。

import * as WangEditor from 'wangeditor';

4、在html设置div容器，放置富文本编辑器。

<div id="editor" style="width: 750px; min-height: 100px"></div>

5、在ts中初始化编辑器。

editor: any;ngOnInit() {// @ts-ignorethis.editor = new WangEditor('#editor');this.editor.config.uploadImgShowBase64 = true;  //使用base64保存图片，即可以上传本地图片this.editor.create();}

6、读取出文本框中html。

 this.conhtml = this.editor.txt.html();

7、将保存的文本重新编辑。

 this.editor.txt.html(res.comcontent);

8、页面上展示出文本框编辑并保存的内容。

//html代码
<div [innerHTML]="content | html" ></div>

//ts代码
if (this.record.comid != null) {this.comService.getCompetitionFindbyid(this.record.comid).subscribe((res) => {this.content = res.comcontent;});}