項目中新功能需要用到富文本編輯，查找了幾個富文本編輯器，結合需求以及以后產品說的可能擴展，最終選擇了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 也可以看看，感覺像是優化版？