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