项目中新功能需要用到富文本编辑，查找了几个富文本编辑器，结合需求以及以后产品说的可能扩展，最终选择了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
还有一个 ngx-umeditor 的： https://github.com/cipchk/ngx-umeditor 也可以看看，感觉像是优化版？
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
