介紹：
angular-froala-wysiwyg： froala editor 的angular版本，支持Angular 2, Angular 4, Angular 5, Angular 6 and Angular 7，具體細節我就不多做介紹，具體參考：
插件倉庫：https://github.com/froala/angular-froala-wysiwyg
文檔api： https://www.froala.com/wysiwyg-editor/docs
之前找了很多富文本編輯器，最后選擇用這個的原因：
第一，它真的很漂亮，界面簡潔耐看，不信你看：
還支持中文，所有工具參數都是可選的，你需要什么樣的配置隨心所欲；
第二，它的api文檔真的很豐富，而且方便查閱，不信你看：
每個參數都有解釋，很容易理解
使用：
具體的使用規則我就不多做解釋了，跟着GitHub里面的介紹一步一步的配置，基本上沒問題的，這里只講幾個點：
編輯器使用：
<div [froalaEditor]='options' [(froalaModel)]="editorContent" (froalaModelChange)="froalaChange($event)"></div>
froalaEditor: 編輯器配置
froalaModel：編輯器雙向綁定的值
froalaModelChange： 監聽編輯器內容變化
常用的基本上就這3個
查看編輯器：
<div [froalaEditor]='options' [froalaView]="editorContent"></div>
froalaView： 編輯器顯示詳情內容
這里的配置其實是可配可不配的，因為查看編輯器的詳情是不顯示頭部的工具欄的
使用的部分大概就是這些了，一般能正常配置完成，就可以使用了
遇到的坑及解決方案
其實這篇博客的重頭大戲在這里，如果你在使用的過程中也碰到了相同的問題，恭喜你，你很有可能能夠得到解決方案，我看了一下，網上這樣的解決方法要么沒有，要么就是太分散，不好找，官方也不給你解決！
坑坑一：
圖片，視頻等的上傳問題：帶tonken等需要校驗的接口沒辦法上傳
官方提供的方法是一個封裝好的方案，提供了一些上傳參數：imageUploadURL、imageUploadMethod、imageAllowedTypes、imageUploadParams等，這些只是添加接口地址，請求方式，但是卻沒有地方設置請求頭，如果需要在請求頭里面添加token怎么辦呢？
圖片最大上傳大小為10M，如果上傳的圖片超過10M，編輯器的反應是什么反應都沒有，驚喜不驚喜，意外不意外，那這種現象怎么杜絕呢？
解決方案：
想要在請求頭加token貌似是做不到的，除非你去改源碼，當然這是不推薦的，我的解決方案是這樣，僅提供一種思路，將需要的token變成query參數，然后讓后端去轉一次，（后端：先請求的token，然后再后端再去做token對比，如果后端不願意，那你就去求求他吧）
imageUploadURL: '/ImgUpload?token=' + this.localToken
圖片過大或者圖片上傳錯誤，一種是設置一個比較大的大小，比如設置最大20M，應該夠用了：
imageMaxSize: 1024 * 1024 * 20
二是設置圖片上傳回調：
events: { // 圖片上傳回調 'froalaEditor.image.uploaded': (e, editor, res) => { const response = JSON.parse(res); this.eventsService.emitMessageEvent(response.State == 1 ? this.eventsService.eventNames.EVENT_TOAST_SUCCESS : this.eventsService.eventNames.EVENT_TOAST_ERROR, response.Message); } },
成功失敗都可以給他一個提示，交互可能會更好一點！
坑坑二：
正式上線的編輯器會提示缺少licence，一行紅色顯示在最頂上，很顯眼：
這么顯眼的東西，是不是看着都煩，但是審查元素可以看到，編輯器都是html構成的，而且這還紅色的也是標簽，那就好辦了，有2種結局方案：
1、全局設置display: none;
a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysiwyg-editor?k=u"] { display: none; }
似乎這樣寫能夠去掉這個紅條，運行也沒問題，絕大部分都會想到這個，別以為萬事大吉了，這樣寫給后面挖了一個巨大的坑，害苦了我，這里先賣個關子，后面着重介紹
2、全局設置定位
a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysiwyg-editor?k=u"] { position: absolute; top: -99999999px; opacity: 0; }
給個透明度為0是給個雙保險，這個是可以的，最終的方案可以采用這個
坑坑三：
當全局設置編輯器licence紅條樣式為display:none,會引發報錯：
TypeError: Cannot read property 'VOID_ELEMENTS' of null
如果有驚喜的話，還會引發別的錯誤，但是這個錯誤是絕對有的，如果你不知道是因為設置了display:none引發的，這樣的錯誤絕對是致命的，因為你根本查找不出問題到底在哪里，我也是查找了各種可能，終於找到問題所在，源碼里面有一行的意思是，如果隱藏掉版權信息，用戶只能操作10次，超過10次，則編輯器會不生效，導致系統會報錯，而且是致命錯誤，頁面會卡死。
解決方案：
參考坑二的第二種方式
坑坑四：
編輯器編輯自定義的合同模板，並插入后台自定義的數據：
這里是合同內容，需要甲方： {{user}}
最后打印合同得到的結果：
這里是合同內容，需要甲方： 甲方爸爸
這就有點意思了，因為編輯器最終得到的是一段html的字符串，如何讓angular去解析我們設置的參數，這是一個難點！
首先要解決的是如何將參數引入到需要的地方去，比如，甲方那里這么客戶使用的話，怎么知道要用user，而不是其他的，如果參數一多，別說是小白客戶了，就算是程序猿自己也會有點蒙！
其次，怎么樣讓參數到編輯器里面去，不可能讓客戶去打{{ }}，然后再加對應的字段，這是反客戶的操作
解決方案：
讓參數到編輯里面去，我們用到了幾個事件：
events : { 'froalaEditor.initialized': (e, editor) => { this.editor = editor; }, // 添加事件，在每次按鍵按下時，都記錄一下最后停留位置 'froalaEditor.keyup': (e, editor, keyupEvent) => { this.lastEditRange = getSelection().getRangeAt(0); }, // 添加事件，在每次鼠標點擊時，都記錄一下最后停留位置 'froalaEditor.click': (e, editor, clickEvent) => { this.lastEditRange = getSelection().getRangeAt(0); } },
一個初始化，一個監聽鍵盤事件，一個監聽鼠標事件，然后存儲最后停了的位置，因為在點擊添加字段的時候，鼠標是離開了編輯器的，那添加字段添加到哪里去，這里就是去處所在了，這么說應該懂吧！
然后給需要的地方添加字段：
// 添加字段到編輯器 add(string){ this.editor.html.insert('<span class="red" style="font-size: 12px; font-weight: bold;">{{' + string + '}}</span>  '); }
this.editor.html.insert這個是編輯器提供的方法，自行查閱，這就很好理解了吧，想在哪里添加就在哪里添加
解析問題解決方案，也只能提供一種思路，因為這個不是程序猿來操作的，所有操作的簡單性就必須要考慮了，我現在用的是所有需要的字段用中文顯示，添加也用中文，這樣的話，客戶就很容易知道他在某個地方添加的是什么，然后最終得到的html字符串用js各種去解析，這里也提供2種思路：
1、通過split將字符串中的中文關鍵字分離出來，然后替換成對應的字段名稱，然后渲染到頁面解析，或者直接替換成真實數據，然后渲染
2、后端提供對應的中文數據，然后根據對應的值把真實值替換上去，然后渲染，這就要你跟后台溝通了
總結：
插件的有點缺少很突出，api也很詳細，我覺得唯一一個需要吐槽的就是沒有免費版的，而且出險問題官方不會跟你解決，歡迎大家跟我交流，如果你遇到我沒遇到的坑，歡迎留下評論，我們一起探討學習！
原創不易,如需轉載,請注明出處,謝謝!