我開發 wangEditor-mobile 的故事

時間 2019-11-06

標籤開發 wangeditor mobile 故事欄目無線简体版

原文原文鏈接

wangEditor-mobile 是一款適用於手機、手指操做的富文本編輯器， wangEditor-mobile 官網

1. 寫在前面

其實，我一開始並無想作什麼手機端操做的富文本編輯器。javascript

wangEditor 是我2014年11月份開始作的一個富文本編輯器，代碼託管在 github，開源、分享以及和你們交流問題。隨着我這一年的時間的維護、升級、分享一些技術博客，也慢慢爲wangEditor積攢了一小撮用戶。

其中，就有一個用戶提出：『作一個手機端的吧，如今他們的項目須要手機端的編輯器』。其實當時提出這種需求的人並很少，並且大部分人都以爲手機端編輯富文本內容，太費勁了，沒有人會這麼作。css

我獲得這個提醒以後，誰的意見我也沒聽，我就是本身靜靜的思考了一些時間，以爲頗有必要作！主要緣由有：html

移動端已是趨勢了，各個產品的流量都在往移動端轉。全部的事兒，你們都在尋求如何能用手機輕鬆解決。
若是像有些人說的沒有人會在移動端編輯富文本內容，那麼office、印象筆記、有道雲筆記幹嗎要出app呢？
如今網絡上適用於手機端的富文本編輯器，（無論好用很差用）暫時尚未，這是機會。

決定的事情就要作下去，是渾水我也趟一回！前端

2. 燒腦的設計過程

接下來要考慮如何作，最燒腦的就是菜單欄如何設計。java

方案一，像PC端同樣，菜單欄放在內容區域的上方、或者下方，以下圖：git

這種要是放在手機上，屏幕一滾動菜單欄找不着了，怎麼用？確定是要放棄的。如今還有wangEditor用戶拿PC版的用的在手機上，可是你可能作項目這樣弄弄能夠，可是我作的是產品，沒用戶體驗的事兒，我絕對不幹。github

在此容許我吐槽一下那些生成支持移動端的富文本編輯器產品，例如xxx。你拿PC端的編輯器放在手機上，用起來費吃奶的勁兒，也叫『支持』？用戶體驗何在？web

方案二，膜拜iOS，菜單欄緊貼着虛擬鍵盤。以下圖：面試

其實網易雲筆記也是用的這種方式。我當時很是喜歡，也很是認定這種方式，這種方式的用戶體驗是最好的，沒有之一！可是很遺憾，他們都是原生開發的app或者有原生app的支持，而我只作網頁端的，只有 javascript 和 css ，根本作不到這種效果。json

在通過一段時間苦尋結果可是最終無果的時候，我就像泄了氣的皮球同樣……

那段時間我一直在尋找另外一個合適的答案，卻一直沒有找到。有時候逼着本身想出一些奇形怪狀的方式，而後本身1分鐘以後就又放棄了。

……

其實，最好用的東西，每每也是最簡潔的。這裏的『好用』『簡潔』都有一個共同特色——零學習成本！

方案三，模擬瀏覽器菜單的方式。以下圖：

我如今也忘了本身是如何想出來這一種方案。和上面強逼着本身想出來的不同，這個方案真的是不經意就想出來的。有些人可能會納悶：真笨，這麼簡單的東西，還用那麼久才能想出來？——我想說：過後諸葛亮沒有發言權。不管它有多簡單，目前也沒有人這麼作。

而後，我採納了這個方案，花了一些時間開發、寫文檔、優化、作兼容，最後終因而出來了。由於我以爲這就是除了方案2以外的最好的方案了——用戶體驗最好！

待你瀏覽完demo以後，請繼續看看下面的一點內容。

產品觀

wangEditor-mobile 這款產品也表明了我對目前移動互聯網『快餐文化』的一種理解。它雖然是『富文本』編輯器，可是功能很是少，操做很是簡潔。

若是用戶想寫一份格式規整的合同或者投標書，他確定不是用手機或者pad寫的。我曾經幹過這樣的工做，用office word寫完了，還得修復若干版本才能發佈。那麼用戶用手機寫的東西，確定是比較生活化、隨性的東西，例如記錄一下心情、備註等等。而這些，wangEditor-mobile的這些功能徹底能夠知足你。

抓住用戶的核心需求。凡事都符合 2/8 原則，我要作好 20% 的功能來知足 80% 的用戶，剩下的 20% 的用戶我不考慮。