移動端富文本踩坑

最近在作一個vue的項目。以前的前端同事離職了，和女友去雲南瀟灑去了，剩下我一個苦逼坐在電腦前噠噠噠敲代碼。剛剛接手就開始作移動端富文本編輯器的需求。主管說壓了半個月，儘快作出來。在網上找了很多編輯器，前段時間作過react的後臺項目，用了百度的編輯器。功能不少很強，遺憾的是ios不支持flash，在移動端並不適用。由於要兼容ios和Android，並且還要在vue的項目中使用，在網上找了不少編輯器。

一： vue-quill-editor （親測是vue項目最好的一個輕量級編輯器）
注：圖片上傳方式是base64，默認轉換且並不上傳
https://surmon-china.github.i...

二：summernote （利用bootstrap搭建的響應式輕量級編輯器）
注： 圖片上傳有兩種方式： 1. 轉換成base64且不上傳 2. 經過url方式上傳圖片
https://summernote.org/

三：medit （一個專一於移動端的輕量級編輯器）
實測：在ios相對高版本中（好像已經11.多了），換行和文字編輯對ios的兼容已經不好了。
https://medit.js.org/

四：vue-html5-editor （一個簡單靈活富文本編輯器，適用於vue2.0以上版本的，對IE11也支持）
注：圖片上傳方式是base64，默認轉換且並不上傳
https://www.npmjs.com/package...

五：jquery-qeditor （輕量級文本編輯器，兼容性： jq你懂的）
注：做者好像很長時間不更新了
https://github.com/huacnlee/j...

六：eleditor （移動端輕量級富文本）
注： 圖片上傳是經過百度插件來實現的
https://eleditor.fixel.cn/

七： simeditor
注：圖片上傳方式，能夠定義尺寸，具體配置還需本身去寫
http://simditor.tower.im/
。。。
還有不少，用過以後感受就像吃了死孩子同樣難受。這裏就不一一列舉了，基本上是能夠知足通常的需求了。

接下來和你們分享一下我在項目中遇到的問題，但願能夠提供一點幫助，少走一點彎路。以vue項目的vue-quill-editor爲例（安裝依賴官網上都有）
在main.js中全局使用，這樣就不用每一個page再去單獨import使用了，直接拿過來就能夠用

page 直接使用（注： 一開始我在查找資料的時候，看到不少以前的資料文檔什麼的，不少東西都寫在ready裏面，vue2.0以後是沒有這個生命週期的，對vue不太熟悉的朋友要注意一下。大神能夠忽略）

Chrome模擬器上的效果：

在真機測試的時候，Android一點問題都沒有，ios系統的手機，徹底沒有反應，功能不兼容。一朋友說是否是輸入框被禁止寫入了，可是在看vue-quill-editor源碼的時候，沒有發現兼容處理的問題。徹底沒有想到是項目以前開發的時候埋下的雷。

在控制檯裏面發現了這個，我擦，內心頓時一萬隻澳洲神獸在狂奔。既然發現了問題就改唄。

改完一測，怎麼仍是不行？？？

這上面的toolbar點了以後只是亮了一下，就沒反應了。一波剛平一波又起，繼續剛，忽然想到了它---fastclick，一開始不知道
是否是它的緣由（https://github.com/ftlabs/fas...）。至於爲何用它？由於ios在click的時候有300ms的延遲，雖然300ms在咱們感受不出來，在瀏覽器上感受已經很明顯了。
在網上開始找fastclick的解決辦法，

這也是上面在使用vue-quill-editor的時候添加class的緣由

添加完，繼續測試ing。。。。
隨着咚的一聲，又是一個坑。第一次輸入是徹底沒有問題的，當文本框失去焦點的時候，想再次輸入的時候，就沒有用了，不行了。。。
看控制檯才發現富文本編輯的時候子元素下面是沒有添加到needsclick這個類名的，怎麼辦？遞歸添加，改fastclick的源碼

把fastclick這個js文件從node_modules中拿出來，而後遞歸添加類名

最後在index.html裏面經過script標籤引進去

這樣就能夠了，即解決了300ms的問題，也兼容了ios。

改源碼作遞歸（是技術主管實現的，我就打打醬油）

參考文檔資料：

https://www.cnblogs.com/mrnut...
http://www.zhimengzhe.com/Jav...
http://www.php.cn/js-tutorial...
https://github.com/ftlabs/fas... 如有錯誤或者不明的地方，歡迎各位指正！