我开发 wangEditor-mobile 的故事

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，轻量化web富文本编辑器

wangEditor-mobile，适用于手机的富文本编辑器

-------------------------------------------------------------------------------------------------------------