wangEditor-mobile 是一款適用於手機、手指操作的富文本編輯器， wangEditor-mobile 官網
1. 寫在前面
其實，我一開始並沒有想做什么手機端操作的富文本編輯器。
wangEditor 是我2014年11月份開始做的一個富文本編輯器，代碼托管在 github，開源、分享以及和大家交流問題。隨着我這一年的時間的維護、升級、分享一些技術博客，也慢慢為wangEditor積攢了一小撮用戶。
其中，就有一個用戶提出：『做一個手機端的吧，現在他們的項目需要手機端的編輯器』。其實當時提出這種需求的人並不多，而且大部分人都覺得手機端編輯富文本內容，太費勁了，沒有人會這么做。
我得到這個提醒之后，誰的意見我也沒聽，我就是自己靜靜的思考了一些時間，覺得很有必要做！主要原因有：
- 移動端已經是趨勢了，各個產品的流量都在往移動端轉。所有的事兒，大家都在尋求如何能用手機輕松解決。
- 如果像有些人說的沒有人會在移動端編輯富文本內容，那么office、印象筆記、有道雲筆記干嘛要出app呢？
- 現在網絡上適用於手機端的富文本編輯器，（不管好用不好用）暫時還沒有，這是機會。
決定的事情就要做下去，是渾水我也趟一回！
2. 燒腦的設計過程
接下來要考慮如何做，最燒腦的就是菜單欄如何設計。
方案一，像PC端一樣，菜單欄放在內容區域的上方、或者下方，如下圖：
這種要是放在手機上，屏幕一滾動菜單欄找不着了，怎么用？肯定是要放棄的。現在還有wangEditor用戶拿PC版的用的在手機上，但是你可能做項目這樣弄弄可以，但是我做的是產品，沒用戶體驗的事兒，我絕對不干。
在此允許我吐槽一下那些生成支持移動端的富文本編輯器產品，例如xxx。你拿PC端的編輯器放在手機上，用起來費吃奶的勁兒，也叫『支持』？用戶體驗何在？
方案二，膜拜iOS，菜單欄緊貼着虛擬鍵盤。如下圖：
其實網易雲筆記也是用的這種方式。我當時非常喜歡，也非常認定這種方式，這種方式的用戶體驗是最好的，沒有之一！但是很遺憾，他們都是原生開發的app或者有原生app的支持，而我只做網頁端的，只有 javascript 和 css ，根本做不到這種效果。
在經過一段時間苦尋結果但是最終無果的時候，我就像泄了氣的皮球一樣……
那段時間我一直在尋找另一個合適的答案，卻一直沒有找到。有時候逼着自己想出一些奇形怪狀的方式，然后自己1分鍾之后就又放棄了。
……
其實，最好用的東西，往往也是最簡潔的。這里的『好用』『簡潔』都有一個共同特點——零學習成本！
方案三，模擬瀏覽器菜單的方式。如下圖：
我現在也忘了自己是如何想出來這一種方案。和上面強逼着自己想出來的不一樣，這個方案真的是不經意就想出來的。有些人可能會納悶：真笨，這么簡單的東西，還用那么久才能想出來？——我想說：事后諸葛亮沒有發言權。無論它有多簡單，目前也沒有人這么做。
然后，我采納了這個方案，花了一些時間開發、寫文檔、優化、做兼容，最后終於是出來了。因為我覺得這就是除了方案2之外的最好的方案了——用戶體驗最好！
待你瀏覽完demo之后，請繼續看看下面的一點內容。
產品觀
wangEditor-mobile 這款產品也代表了我對目前移動互聯網『快餐文化』的一種理解。它雖然是『富文本』編輯器，但是功能非常少，操作非常簡潔。
如果用戶想寫一份格式規整的合同或者投標書，他肯定不是用手機或者pad寫的。我曾經干過這樣的工作，用office word寫完了，還得修復若干版本才能發布。那么用戶用手機寫的東西，肯定是比較生活化、隨性的東西，例如記錄一下心情、備注等等。而這些，wangEditor-mobile的這些功能完全可以滿足你。
抓住用戶的核心需求。凡事都符合 2/8 原則，我要做好 20% 的功能來滿足 80% 的用戶，剩下的 20% 的用戶我不考慮。
最后
目前這款產品已經有人開始關注並嘗試使用，但是畢竟移動端的需求量目前並不大，或者說我的推廣能力限制了只有那么多人能看到它。
另外，移動端web比較出名的是Android系統中各個瀏覽器的兼容性，我現在也對此比較棘手，不會正在逐步的完善解決。
感興趣就加入我們的QQ群：164999061 wangEditor-mobile
-------------------------------------------------------------------------------------------------------------
學習作者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大眾點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》
------------------------------------------------------------------------------------------------------------
wangEditor-mobile，適用於手機的富文本編輯器
-------------------------------------------------------------------------------------------------------------