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-mobile,适用于手机的富文本编辑器
-------------------------------------------------------------------------------------------------------------