angular 结合 wangeditor 使用
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 ， 使用手册，很详细，很简单
以及git：https://github.com/wangfupeng1988/wangEditor
注：
本地设置了 ：this.editor.customConfig.uploadImgShowBase64 = true;
所以没有用到后端的上传地址，转成了 base64，直接将带html标签的字符串传给后台，后台保存成文件。
