angular-froala-wysiwyg 富文字編輯器使用及遇到的坑
介紹：
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也很詳細，我覺得唯一一個需要吐槽的就是沒有免費版的，而且出險問題官方不會跟你解決，歡迎大家跟我交流，如果你遇到我沒遇到的坑，歡迎留下評論，我們一起探討學習！
原創不易,如需轉載,請註明出處,謝謝!