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

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

时间: 2024-10-11 20:08:28

我开发 wangEditor-mobile 的故事的相关文章

敏捷开发(四)- 故事验收测试

接着上篇 "估算故事"讲,故事估算完成以后就要开始考虑如何进行验收测试了,只有验收通过故事才算开发完成. 对于一个故事,开发人员和客户可能会讨论很多,讨论的内容可以以测试用例的形式记录下来,这样就为我们故事测试做了铺垫,目前敏捷开发中测试大约有如下2个步骤    1.将测试要点记录到敏捷的故事卡的背面,任何时候发现新的测试,都可以记录到故事卡背面     2.将测试要点变成全面测试,这些测试用来演示故事已正确.完整的实现 下面说一下什么时候写测试用例,以及测试的方法.  在编写代码之前

解决VS2008 开发Windows Mobile 项目生成速度慢的问题(转)

最近用VS2008开发Windows Mobile程序,使用C#..NET Compact Framework,发现项目生成速度比较慢.用VS2008打开项目后,开始一段时间生成速度还能忍受,时间一长,编译速度巨慢,最慢达到5分钟之久,实在无法忍受. 决定找出VS2008生成时,做了什么花费时间的工作.从工具à选项进入“选项”对话框 选择“MSBuild项目生成输出详细信息”为“诊断”这样编译时,会输出具体执行了那些任务,花费了多少时间. 结果发现最花费时间的是 Platform Verific

敏捷开发的一些思考--故事拆分

敏捷开发目前已成为互联网公司的首选方案,为应对市场的快速变化,我们公司也在大力推广敏捷,最近在读<用户故事与敏捷方法>一书,我想边读边做一些分享,传播知识的同时加强记忆. 1.       基于用户建模是一个比较好的起点. 产品团队可以采用头脑风暴等形式,挖掘出产品实际存在或者潜在的用户或客户,给他们一些角色. 多种角色出现重叠时,再将重叠部分成立一个独立角色. 比如"运维角色"和"部署角色"都需要做一件事情:做数据修改,那么我们就考虑一个"数

jQuery移动开发 jQuery Mobile Develop and Design 中文pdf扫描版

<jQuery移动开发>主要介绍使用jQuery Mobile框架创建移动网站的技巧和方法.全书首先介绍jQuery Mobile框架的基础知识,以及HTML5在其中的作用:接着介绍UI组件的创建,包括对话框窗口和按钮.布局选项.列表.表单元素和jQuery Mobile主题等:此外书中还详细讲解了移动API和jQuery Mobile的内容管理系统,并在最后介绍了使用模拟器测试网站的技术和技巧.jQuery移动开发目录:第1部分 jQuery Mobile基础 第1章 理解jQuery 第2

3.PO如何给开发团队讲好故事

敏捷开发系列文章目录 讲出符合开发团队味口的故事. 上一章说了敏捷开发团队的构成与迭代过程,本章重点说一下迭代第一天的计划会议.熟话说“好的开始就成功了一半”,一个迭代的计划会议做得好不好确实直接注定着迭代的成功与失败.迭代开始之前,PO肯定都已经提前准备好了本次迭代的所有故事,并且提前都发给了团队熟悉,后来我们一般都会在前一个迭代快要完成的时候开一个下个迭代的熟悉会议,组织大家一起熟悉下个迭代的故事,一开始并没有这么做,是在过去的多个迭代中,发现每个迭代计划会议都会拖得很长,有时候会开整整一天

IOS开发-jqeurey mobile

有一阵子没写东西了,最近打算重新拾起开发,做点手机上的东东,选中了phonegap.jquery mobile,phonegap的部署网上非常多,有空了再班门弄斧,这里先记下jquery mobile吧. 这个帖子不错:PhoneGap&jQuery Mobile应用开发环境配置(For Android) "将D:\jquery.mobile-1.3.2\demos\css复制到D:\androidws\HelloWorld\assets\www\css中:将D:\jquery.mobi

用户故事与敏捷开发方法笔记06

用户故事得到这么多人的肯定,是因为它自身的优势有很多:1.用户故事强调口头沟通,因为传统的通过各种文档进行表达,每个人对于文字的含义的理解都不同,所以在阅读文档的过程中可能会因为理解的不同对项目的完成造成影响:2.人人都可以理解用户故事,并且用户故事可以增强人们对各种事件的记忆:3.用户故事的大小适合做发布规划以及进行编程和测试:4.用户故事适合于迭代开发,项目过程中可以写出一部分故事然后就进行编码和测试5.用户故事鼓励延迟细节:6.用户故事支持随机应变的开发,因为用户故事注重口头交流,而且很容

项目管理(十二)- 敏捷开发之编写故事

在本章我们将关注故事编写,为了更好的构造故事,我们关注六个特性,一个好的故事应该具有如下6个方面的特点 故事的6个特征 1.独立的 避免故事之间的相互依赖,在对故事排列优先级时,或者使用故事做计划时,故事间的相互依赖会导致一些问题 2.可讨论的 故事是可讨论的,他们不是签署好的合同或者软件中必须实现的需求,敏捷故事是功能的简短描述,细节将在客户团队和开发团队中讨论中产生,故事是提醒客户团队和开发团队以后要进行关于需求的对话,它并不是具体的需求本身,因而它不需要包含具体的细节.这些细节可以在后期例

用户故事与敏捷开发方法笔记05

每一轮迭代完成之后需要开迭代计划会议为下一轮的迭代计划.迭代计划会议包括:1.讨论故事:2.从故事中分解出任务:3.开发人员承担每个任务的职责:4.以上3项完成之后每个开发人员对其任务量估计,尽量保证自己领取的任务在下轮迭代结束时可以完成. 讨论故事:开发人员充分理解故事,在其中分解出任务:需要理清故事的关键细节. 从故事中分解出任务:因为一个故事有可能由几个程序员一起承担,所以要将故事分级成更小的单位:而且分解任务的过程还可以发现以前被忽视的细节. 开发人员承担每个任务的职责:开发人员自己领取

用户故事驱动的敏捷开发 – 1. 规划篇

敏捷开发现在已经不是新鲜事物了,我们都从各种渠道听到过不同的团队实施敏捷的胜果,听的时候觉得很美,回到家就发现那都是别人家的团队,结合自己的情况一看就发现问题一大堆.就算是最终打算一试,也经常会不知如何开始.这就是我希望编写这份文档的原因,能够找到一个遵循的敏捷项目管理模型,虽然我们都知道没有一个放之四海而皆准的方法,但在更高的层面上我觉得这仍然是可行的.也就是说,管理模型是一致的,但是其中采用的方法可能各有不同,最终目标是唯一的:打造一支可以快速适应变化的高质量团队,并输出高质量的产品! 今天