项目中新功能需要用到富文本编辑，查找了几个富文本编辑器，结合需求以及以后产品说的可能扩展，最终选择了ueditor
首先就是功能超多，一步到位，估计都不用二次开发就够用了：
使用的话，首先要装包：
（
npm install ngx-ueditor --save）
然后就是引入到模块，然后配置前端配置项：
这是目录结构（没有在根目录引入，就为了写demo）：
接着就是这个 ueditor 这个文件夹，需要去对应地址去下载： https://ueditor.baidu.com/website/download.html ，引用配置就完成了。
这时候如果想看demo，可以直接打开demo.html，就能直接看见了效果了，没有demo.html 的话，就自己创建一个，放在如上图路径下：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain">这里写你的初始化内容</script> <!-- 配置文件 --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="ueditor.all.js"></script> <!-- 实例化编辑器 --> <script type="text/javascript"> var ue = UE.getEditor(\'container\'); </script> </body> </html>
然后是使用配置（创建一个组件，在html界面中直接引用）：
ts 文件中使用创建相应变量及设置配置，如果不传配置的话，会默认使用：ueditor.config.js 文件：
在模块中引入该组件，ng serve 启动项目，就能看到配置好的功能啦：
ueditor 有很多个api，可以直接获取到带html的编辑器中输入的全部内容，可以直接使用相应方法来解析带html 标签的字符串。我这里使用的是 [innerHtml] ，但innerHtml 不能解析元素的内联样式，于是乎，用管道：
页面解析时：
最终实践代码（服务是没用到的）：
u-editor.component.html：
<div class="ueditor-box"> <ueditor [(ngModel)]="full_source" [config]="ueditor_config" (onReady)="onReady($event)" #full></ueditor> <div class="btn-group"> <pre class="show-message">{{showMessage}}</pre> <div [innerHTML]="showMessage | html" class="final-display"></div> <h2>语言转换</h2> <hr/> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="languageChange($event, \'zh-cn\')"> <span>zh-cn</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="languageChange($event, \'en\')"> <span>en</span> </button> <hr/> <h2>常用API</h2> <hr/> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="setContent($event)"> <span>写入内容</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="setContent($event, true)"> <span>追加内容</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="insertContent($event)"> <span>光标处插入给定的内容</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="insertImage($event)"> <span>插入图片</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="hasContents($event)"> <span>判断是否有内容</span> </button> <br> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="getAllHtml($event)"> <span>获得整个html的内容</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="getContent($event)"> <span>获得内容(带html标签)</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="getContentTxt($event)"> <span>获得纯文本</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="getPlainTxt($event)"> <span>获得带格式的纯文本(能获得但显示需处理)</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="getText($event)"> <span>获得当前选中的文本(暂时有问题)</span> </button> <br> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="onfocus($event)"> <span>使编辑器获得焦点</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="onblur($event)"> <span>使编辑器失去焦点</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="isOnFocus($event)"> <span>判断编辑器是否有焦点</span> </button> <br> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="setEnabled($event)"> <span>编辑器可以编辑</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="setDisabled($event)"> <span>编辑器不可编辑</span> </button> <br> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="setHide($event)"> <span>隐藏编辑器</span> </button> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="setShow($event)"> <span>显示编辑器</span> </button> <br> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="setHeight($event)"> <span>设置编辑器的高度为300</span> </button> <br> <button class="btn-search" nz-button [nzType]="\'primary\'" [nzSize]="\'normal\'" (click)="clearDoc($event)"> <span>清空文档</span> </button> </div> </div>
u-editor.component.scss
.ueditor-box {
padding: 20px;
overflow: auto;
height: 100%;
.btn-group {
button {
margin-right: 10px;
margin-bottom: 10px;
}
.show-message {
margin: 10px 0;
border: 1px solid #ccc;
height: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.final-display {
font-size: 16px;
color: #000;
font-family: initial;
}
}
}
u-editor.component.ts
import { Component, ElementRef, OnInit, ViewChild } from \'@angular/core\'; import { AppService } from \'../../../app.service\'; import { UEditorDemoService } from \'./u-editor.service\'; import { UEditorComponent } from \'ngx-ueditor\'; /** * @description 富文本编辑测试组件 */ @Component({ selector: \'app-u-editor\', templateUrl: \'./u-editor.component.html\', styleUrls: [ \'./u-editor.component.scss\' ] }) export class UEditorDemoComponent implements OnInit { @ViewChild(\'full\') full: UEditorComponent; public sign = \'u_editor\'; // 展示api获取到的数据 public showMessage; public full_source; // 配置信息 public ueditor_config = { toolbars: [ [ \'FullScreen\', // 全屏 \'bold\', // 加粗 \'italic\', // 斜体 \'underline\', // 下划线 \'|\', \'forecolor\', // 字体颜色 \'backcolor\', // 背景色 \'fontfamily\', // 字体 \'fontsize\', // 字号 \'|\', \'insertorderedlist\', // 有序列表 \'insertunorderedlist\', // 无序列表 \'|\', \'justifyleft\', // 左对齐 \'justifycenter\', // 居中对齐 \'justifyright\', // 右对齐 \'justifyjustify\', // 两端对齐 \'|\', \'link\', // 超链接 \'unlink\', // 取消链接 \'inserttable\', // 插入表格 \'|\', \'simpleupload\', // 单图上传 ] ], autoClearinitialContent: true, // 自动清除初始内容 wordCount: true, // 文字计数 focus: false, // 初始化后获得焦点 initialFrameHeight: 200, // 设置高度 initialFrameWidth: \'100%\', // 设置宽度 enableDragUpload: true, // 启用拖放上传 enablePasteUpload: true, // 启用粘贴上传 imageScaleEnabled: true, // 启用图片拉伸缩放 autoHeightEnabled: true, // 自动高度 }; constructor (private uEditorDemoService: UEditorDemoService, private appService: AppService, private elementRef: ElementRef) { } ngOnInit () { } // ueditor 加载完成 onReady ($event) { // 字体大小及颜色，通过class设置默认：16px、#000 } // 切换语言触发方法 languageChange ($event, language) { this.full.setLanguage(language); } // 获取全部html内容 getAllHtml () { this.showMessage = this.full.Instance.getAllHtml(); } // 获得文本，带html标签 getContent () { this.showMessage = this.full.Instance.getContent(); // 设置img标签的垂直对齐为底部对齐 setTimeout(() => { const imgs = document.getElementsByTagName(\'img\'); for (let i = 0; i < imgs.length; i++) { imgs[ i ].style.verticalAlign = \'initial\'; } }); } // 获取纯文本 getContentTxt () { this.showMessage = this.full.Instance.getContentTxt(); } /** * 写入/追加内容 * @param { Object } $event 事件对象 * @param { boolean } type 是否是追加，true：追加；false，直接更新内容 */ setContent ($event, type) { this.showMessage = type ? \'追加文本\' : \'添加文本\'; this.full.Instance.setContent(\'<h3>一段文本</h3>\', type); } // 获取带格式的文本 getPlainTxt () { this.showMessage = this.full.Instance.getPlainTxt(); console.log(this.showMessage); } // 判断编辑器是否有内容 hasContents () { this.showMessage = this.full.Instance.hasContents() ? \'有内容\' : \'无内容\'; } // 编辑器获得焦点 onfocus () { this.full.Instance.focus(); this.showMessage = \'获得焦点\'; } // 编辑器失去焦点 onblur () { this.full.Instance.blur(); this.showMessage = \'失去焦点\'; } // 编辑器是否有焦点 isOnFocus () { this.showMessage = this.full.Instance.isFocus() ? \'有焦点\' : \'无焦点\'; } // 设置当前区域不可编辑 setDisabled () { this.full.Instance.setDisabled(); this.showMessage = \'当前区域不可编辑\'; } // 设置当前区域可编辑 setEnabled () { this.full.Instance.setEnabled(); this.showMessage = \'当前区域可编辑\'; } // 隐藏编辑器 setHide () { this.full.Instance.setHide(); this.showMessage = \'隐藏编辑器\'; } // 显示编辑器 setShow () { this.full.Instance.setShow(); this.showMessage = \'显示编辑器\'; } // 获取当前选中文本 getText () { this.showMessage = this.full.Instance.selection.getText(); console.log(this.full.Instance.selection); console.log(this.full.Instance.selection.getText()); } // 在光标出插入内容 insertContent () { this.full.Instance.execCommand(\'inserthtml\', \'<span>插入一段文本</span>\'); } // 设置高度方法 setHeight ($event) { this.full.Instance.setHeight(300); } // 清空文档 clearDoc () { this.full.Instance.execCommand(\'cleardoc\'); } // 插入图片 insertImage () { this.full.Instance.execCommand(\'insertimage\', { src: \'../assets/image/a.jpeg\', width: \'100\', height: \'100\', }); // 第二个参数：{} / [{},{}] } }
html-pipe.ts
import { Pipe, PipeTransform } from \'@angular/core\'; import { DomSanitizer } from \'@angular/platform-browser\'; /** * @description 解决 [innerHtml] 解析html标签字符串 不解析内联样式问题，用管道处理 */ @Pipe({ name: \'html\' }) export class HtmlPipe implements PipeTransform { constructor (private sanitizer: DomSanitizer) { } transform (style) { return this.sanitizer.bypassSecurityTrustHtml(style); } }
好啦，就先这些，如果要用到各种上传什么的，则需要配置后端服务。。。
引一下git：https://github.com/cipchk/ngx-ueditor
官网：http://fex.baidu.com/ueditor/#start-config
还有一个 ngx-umeditor 的： https://github.com/cipchk/ngx-umeditor 也可以看看，感觉像是优化版？