项目中新功能需要用到富文本编辑，查找了几个富文本编辑器，结合需求以及以后产品说的可能扩展，最终选择了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 也可以看看，感觉像是优化版？
查看更多关于angular5 使用 ueditor的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did223037