ueditor 功能虽然丰富，但是配置起来确实麻烦，后台比较忙，没时间联调，导致图片上传的问题一直搁置，总不能一直放着呀，就想着找一个轻量级的，配置不需要那么麻烦的富文本编辑器。
功夫不负有心人，看了诸多的插件：ngx-quill 没有支持表格，ckeditor 配置起来跟 ueditor 差不多。。。
结果还真的让我找到了一个易用性的插件，而且功能也可以，满足现在的需求，因为功能比较急，就先不考虑以后的二次开发了，呲牙。
wangeditor，纯js+css写出来的富文本编辑器，整个js代码量才4000多行，算是轻量级的了~
下面开始使用流程梳理：
先看 demo： http://www.wangeditor.com/
该有的都有，那还等什么，直接安装吧： npm install wangeditor
然后我们创建一个组件，直接引入js文件，可能版本不同，对应包的目录结构不一样，不过最终是 wangEditor.js 就行：
有的 tsconfig.json 中没有配置 allowJs ，那么上面的 import 的js文件就会读不了，所以要设置一下：
然后我们界面中创建2个div，分别给上id，因为 wangeditor 是菜单栏编辑栏分离的，所以可以直接写成2个元素
接着组件加载完成，进行编辑器初始化：主要就是1个new，和 create() 方法，不配置的话会直接使用默认：
ng serve 启动项目可以看到功能可用：
到这一步就完成了，是不是配置比 ueditor 更加简单！
最终文件：
wang-editor.component.html ，这个编辑器没用那么多的api
< div class ="wangeditor-box" >
< div id ="editorMenu" ></ div >
< div id ="editor" style ="height:400px;max-height:500px;" >
< p > {{defaultMessage}} </ p >
</ div >
< div class ="btn-group" >
< pre class ="show-message" > {{showMessage}} </ pre >
< div [innerHTML] ="showMessage | html" ></ div >
< hr />
< textarea rows ="4" nz-input [(ngModel)] ="textareaValue" class ="text-area" ></ textarea >
< button class ="btn-search margin-l-10" nz-button [nzType] ="'primary'" [nzSize] ="'normal'"
(click) ="setContent()" >
< span > 设置内容 </ span >
</ button >
< hr />
< button class ="btn-search" nz-button [nzType] ="'primary'" [nzSize] ="'normal'"
(click) ="getContent()" >
< span > 获取内容（html） </ span >
</ button >
< button class ="btn-search" nz-button [nzType] ="'primary'" [nzSize] ="'normal'"
(click) ="getContentText()" >
< span > 获取内容（纯文本） </ span >
</ button >
</ div >
</ div >
wang-editor.component.scss ，可以自己调整样式，我这里调整了编辑器高度
@import "~wangeditor/release/wangEditor.min.css";
.wangeditor-box {
padding: 20px;
overflow: auto;
height: 100%;
#editor{
height: 400px;
width: auto;
border:1px solid #ccc;
}
.w-e-toolbar{
background-color: #f1f1f1;
border: 1px solid #ccc;
}
.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;
}
.text-area {
width: 50%;
}
.margin-l-10 {
margin-left: 10px;
}
}
}
wang-editor.component.ts
import { Component, ElementRef, OnInit, Renderer, ViewChild } from '@angular/core' ;
import { AppService } from 'app.service' ;
import * as wangEditor from 'node_modules/wangeditor/release/wangEditor.js' ;
/**
* @description 富文本编辑测试组件
*/
@Component({
selector: 'app-wang-editor' ,
templateUrl: './wang-editor.component.html' ,
styleUrls: [ './wang-editor.component.scss' ]
})
export class WangEditorDemoComponent implements OnInit {
public sign = 'wang_editor' ;
private editor: any;
// 展示api获取到的数据
public showMessage = 'Waiting for display' ;
// 默认显示
public defaultMessage = '请输入内容...' ;
// 设置展示内容输入框变量
public textareaValue = '<p><span style="font-weight: bold;"> test:</span> 用<span style="color: ' +
'rgb(139, 170, 74);"> JS 设置的</span>内容 <img src="http://img.t.sinajs' +
'.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png"></p>' ;
constructor ( private appService: AppService,
private el: ElementRef, private renderer: Renderer) {
}
ngOnInit () {
this .editor = new wangEditor('#editorMenu', '#editor' );
console.log( this .editor);
// 设置编辑器配置
this .setEditorConfig();
// 创建编辑器
this .editor.create();
}
// 编辑器相关配置设置
setEditorConfig () {
// 使用 base64 保存图片
this .editor.customConfig.uploadImgShowBase64 = true ;
// 菜单展示项配置
// this.editor.customConfig.menus = this.getMenuConfig();
// 自定义配置颜色（字体颜色、背景色）
this .editor.customConfig.colors = this .getColorConfig();
// 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
this .editor.customConfig.emotions = this .getEmotionsConfig();
// 自定义字体
this .editor.customConfig.fontNames = this .getFontFamilyConfig();
// 编辑区域的z-index默认为10000
// this.editor.customConfig.zIndex = 100;
// 配置编辑器内容改变触发方法
this .editor.customConfig.onchange = this .editorContentChange;
// 编辑器获取到焦点触发方法
this .editor.customConfig.onfocus = this .editorOnFocus;
// 编辑器失去焦点触发方法
this .editor.customConfig.onblur = this .editorOnBlur;
}
// 获取显示菜单项
getMenuConfig (): string[] {
return [
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
'head', // 标题
'fontName', // 字体
'fontSize', // 字号
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'table', // 表格
'image', // 插入图片
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
}
// 获取字体、背景颜色列表配置
getColorConfig(): string[] {
return [
'#000000' ,
'#eeece0' ,
'#1c487f' ,
'#4d80bf' ,
'#c24f4a' ,
'#8baa4a' ,
'#7b5ba1' ,
'#46acc8' ,
'#f9963b' ,
'#ffffff'
];
}
// 获取表情配置
getEmotionsConfig() {
return [
{
// tab 的标题
title: '默认' ,
// type -> 'emoji' / 'image'
type: 'image' ,
// content -> 数组
content: [
{
alt: '[坏笑]' ,
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
},
{
alt: '[舔屏]' ,
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
}
]
},
{
// tab 的标题
title: 'emoji' ,
// type -> 'emoji' / 'image'
type: 'emoji' ,
// content -> 数组
content: ['????', '????', '????', '????', '????' ]
}
];
}
// 获取字体列表配置
getFontFamilyConfig(): string[] {
return [
'宋体' ,
'微软雅黑' ,
'Arial' ,
'Tahoma' ,
'Verdana'
];
}
// 富文本编辑器内容变化触发方法
editorContentChange = (html) => {
console.log(html);
}
// 编辑器获取到焦点触发事件
editorOnFocus = () => {
console.log( 'on focus' );
}
// 编辑器失去焦点触发事件
editorOnBlur = (html) => {
console.log( 'on blur' );
console.log(html);
}
// 设置编辑器显示内容
setContent() {
this .editor.txt.html( this .textareaValue);
}
// 获取编辑器内容，带html
getContent() {
this .showMessage = this .editor.txt.html();
}
// 获取编辑器文字内容
getContentText() {
this .showMessage = this .editor.txt.text();
}
}
解析的话还是 innerHtml ，管道用的是上一篇写好的管道~
引个地址： https://www.kancloud.cn/wangfupeng/wangeditor3/332599 ， 使用手册，很详细，很简单
官网： http://www.wangeditor.com/
以及git： https://github.com/wangfupeng1988/wangEditor
注：
本地设置了 ：this.editor.customConfig.uploadImgShowBase64 = true;
所以没有用到后端的上传地址，转成了 base64，直接将带html标签的字符串传给后台，后台保存成文件。
查看更多关于angular 结合 wangeditor 使用的详细内容...