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種結局方案：

一、全局設置display: none;

a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysiwyg-editor?k=u"] {
  display: none;
 }

彷佛這樣寫可以去掉這個紅條，運行也沒問題，絕大部分都會想到這個，別覺得萬事大吉了，這樣寫給後面挖了一個巨大的坑，害苦了我，這裏先賣個關子，後面着重介紹

二、全局設置定位

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>&nbsp&nbsp');
  }

this.editor.html.insert這個是編輯器提供的方法，自行查閱，這就很好理解了吧，想在哪裏添加就在哪裏添加

 解析問題解決方案，也只能提供一種思路，由於這個不是程序猿來操做的，全部操做的簡單性就必需要考慮了，我如今用的是全部須要的字段用中文顯示，添加也用中文，這樣的話，客戶就很容易知道他在某個地方添加的是什麼，而後最終獲得的html字符串用js各類去解析，這裏也提供2種思路：

一、經過split將字符串中的中文關鍵字分離出來，而後替換成對應的字段名稱，而後渲染到頁面解析，或者直接替換成真實數據，而後渲染

二、後端提供對應的中文數據，而後根據對應的值把真實值替換上去，而後渲染，這就要你跟後臺溝通了

 

總結：

插件的有點缺乏很突出，api也很詳細，我以爲惟一一個須要吐槽的就是沒有免費版的，並且出險問題官方不會跟你解決，歡迎你們跟我交流，若是你遇到我沒遇到的坑，歡迎留下評論，咱們一塊兒探討學習！

原創不易,如需轉載,請註明出處,謝謝!