angular5 使用 ueditor
项目中新功能需要用到富文本编辑，查找了几个富文本编辑器，结合需求以及以后产品说的可能扩展，最终选择了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 也可以看看，感觉像是优化版？
