我开发 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

 

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

欢迎关注我的教程：

《使用grunt搭建全自动web前端开发环境》《从设计到模式》《json2.js源码解读视频》

《深入理解javascript原型和闭包系列》《css知多少》《微软petshop4.0源码解读视频》

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

wangEditor，轻量化web富文本编辑器

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

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