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-ignore
this.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;
});
}