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標簽的字符串傳給后台，后台保存成文件。