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

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

     
  • 相关阅读:
    CSS 文档流布局以及盒子模型
    CSS样式继承和样式权重
    CSS选择器餐厅练习
    node.js读写json文件
    C#单例模式的2种实现方式,Lazy模式和双检锁模式
    The Entity Framework provider type 'MySql.Data.MySqlClient.MySqlProviderServices, MySql.Data.EntityFramework, Version=8.0.18.0,
    mysql主从配置
    nginx 限制ip并发数,nginx限制IP连接数的范例参考
    certbot 调用cloudflare api申请证书
    proxy_pass url 反向代理的坑
  • 原文地址:https://www.cnblogs.com/wangfupeng1988/p/5090148.html
Copyright © 2020-2023  润新知