我開發 wangEditor-mobile 的故事

王福朋發表於2015-12-31

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% 的使用者我不考慮。