【我的产品观】开发wangEditor一年总结

1. 引言

  标题说是一周年,其实是不是正好是一周年,我也忘记了,光从github的提交记录看也不准确。印象中觉得,如果要论想法,到现在一年多了,如果要论实际写代码,可能差不多正好一年。

  从8月底在济南离职来到北京,一直熟悉新的工作环境和工作节奏,好久没有更新博客了。今天来总结一下这一年的wangEditor的成长过程,以及我自己在这一年的时间,对于技术、产品等各方面的思考。

  感觉对这几方面的体会和感悟还是挺多的,拿出来和大家分享。

2. 什么鬼?

       不过,大部分朋友可能还都不知道wangEditor是什么鬼?

       wangEditor——是我开发的一款轻量级富文本编辑器,开源免费,一年来一直在更新完善。有兴趣或者有需求的同学,欢迎猛戳以下链接,或者加入QQ群:164999061,那里已经有260多个小伙伴(不断增长)在欢乐的玩耍了。

 你若要问wangEditor和其他富文本编辑器的区别,进入官网看一下你就知道啦!

  

  另外,我近期正式开启了移动端编辑器的开发工作,现在已经开发了一部分了,可以看看效果。不过目前功能还未开发完善,性能和用户体验也需要进一步优化,预计会在两周之后发布一个测试版给大家试用。

  

  手机扫描二维码预览Demo(功能不全面)

    

3. 产品一年的变化

  记得我之前写过一篇文章《我为什么要做富文本编辑器wangEditor5个月总结》现在回过头来回忆一下,感觉还是挺有意思的,感觉自己也挺能折腾。

 

  3.1 UI界面

  wangEditor最早的时候UI是这样的,当时还依赖于bootstrap这么一个庞大的UI库。

  

  后来经过了很多次改版(有兴趣的同学可以看看上面的文章)和UI升级,才到现在官网上这个样子,大家可以对比一下。一年之前和现在,UI是不是漂亮很多了?

     

 

  3.2 功能

  一年之前刚刚推出的时候,功能非常简单,大家可以从上文的界面中看出来。一年之后的现在,编辑器几乎涵盖了项目常用的大部分功能。除了最初有的基本功能之外,后面加的主要功能有:

  • 查看更新源码
  • 引用
  • 表情和分组表情
  • 插入视频
  • 插入代码以及配置高亮代码
  • 图片上传(支持跨域和非跨域)
  • 插入代码已经配置代码高亮

以上都是和UI有关的功能,还有很多和UI无关的功能,例如支持AMD、CMD……

  这些功能有些是我自己主动加的,也有一些是使用者提出来,我觉得合理加上的。

 

  3.3 技术

  一年之内,我对wangEditor进行了2次重构,这其实就是在开发过成功不断摸索慢慢步入正轨的过程。而现在我正在计划第三次,最晚会在元旦之后展开。

  第三次重构并不是我对当前系统架构的否认,而是一次彻底的升级。现在的框架设计,如果全是我自己来开发,一点问题都没有。这几个月大家提出的问题,我基于现在的框架修改绝大部分情况下得心应手。

  第三次重构我的目标是——彻底的组件化,支持自定义扩展菜单,支持插件机制和多人开发。自己个人毕竟精力有限,我要通过重构框架,将每个功能点都分离、将系统可扩展化。这样就为其他开发人员开放了接口,可以接入他们想要的东西!

 

  另外,这一年的时间,到现在我已经为wangEditor进行了173次的代码提交,平均每2天一次commit。唉,我也是一个上班族,时间真的都是挤出来的。

  最后,解决的bug我没数过,github的issues中有将近60个问题,不过那是后来才慢慢开始用起来的。要算实际数量,得是这个数的N倍。各位同行不要见笑,bug发现的多,不一定是坏事儿,发现不了才是坏事儿,你懂得。。。

 

  3.4 其他

  在这一年之内,除了UI、功能、技术上的改进,我还慢慢的为产品开展了以下平台,这些也都是运营一个产品所必须的。

  QQ群(164999061:一开始没有QQ群,这是后来,我也忘记什么时候了,一个使用者提出可以键一个QQ群讨论问题。人也是在慢慢的增长,现在有260多个人。

       Github issues: 这也是一个使用者的建议,说以后问题都要记录在测,我作为作者不能整天泡在QQ群解答问题,那不成了客服了吗?——有道理——不过想改变大家提问的习惯,可不是个简单的事儿,后文会详细解说这一点。不过目前issues里面已经积累了将近60个问题,也算是终于起步了。

  官网:一年之前是没有这个wangEditor这个网站的,我后来申请了域名,做了一个还算漂亮的官网,也算是有门面的产品了。

  文档:我印象中好像大半年没有文档,一些基本使用都写在github的README里面,但是那里根本就写不开呀。后来我自己写文档页面放在官网上。由于官网托管在github,有些人反应访问慢,于是又更换到了kanclound.cn这个平台上,感觉还是很不错的。

 

  3.5 小结

  我不知道你在看以上总结的时候感觉如何,我写完这一段之后,感觉手都酸了——怎么一年之内折腾了那么多事儿啊??这还是简单写的,要详细写得写本书了。当然写了书也估计没人买——wangEditor知名度目前还非常低。

  但是——我希望在明年的这个时候再写总结的时候,还是要写到手发酸才好!——我接下来的一年还要接着折腾。

 

4. 如何对待产品用户

  4.1 发发我的牢骚

  从创建了QQ群,用户不断的加入,我慢慢的出现了如何对待用户的困惑。如果你没有这个体会,听我给你慢慢道来。

  一开始,QQ群就那么几个人,怎么都好说,有问题说问题,聊天扯淡也OK。后来慢慢人多了几十个人了,我还是以雷锋为榜样,只要有问题,我就第一时间赶上去,交流然后解答。这样一直持续了好久,我当时对此也乐此不疲。

 

  再后来人多了时间久了,我发现不对劲儿,有些人问问题不懂得怎么问。

  这里先插一句:问问题和通过百度搜索问题一样,这是有学问的。例如你输入一些错误提示关键字,很可能就找到了答案,但是你输入『这儿运行不出来』,你试试,搜一年你也搜不出来。运行不出来?哪儿运行不出来,谁知道啊?让我看那就是你自己的能力不行、脑袋不行。

  接着说,有些人提问就是这样。在群里说一句:『我的菜单图标不显示啊』就完了,再好点的还能贴个图给你。各位你说你如果作为作者、群主遇到这种情况该如何处理?

  我一开始是追问:怎么不行、哪儿出不来、什么浏览器、提示什么错误、下载的代码有没有字体文件……因为一个错误可能会有很多种情况造成的,你得一个一个判断呀。

  后来也是经过一个人的提醒,说:你不能再当客服了,你得集中精力做产品升级呀,这是你的核心价值。你应该提供文档、提问接口,让用户自己看文档自己提问。

  我觉得很有道理,于是就这么做了。但是这么做的后果就是在很长一段时间,我一直不断的在QQ群发『看文档』、『去githut提交问题』……说了不知道多少遍。到现在,我还一直在群里说『新加入的同学请阅读群公告』……

   

 

  4.2 我的看法

  下面我抛开自己是一个产品作者的身份谈谈提问这件事。

  有一句话:老练的程序员都是改bug改出来的。这句话虽然不全面,但是却说出了一个重点内容。遇到一个问题,你都不去主管思考,上来就去提问,这本身就是对自己的极不负责任。

  我平时的工作有几乎一半的时间在改bug(其实百度的产品bug也不少,要不然要那么多开发人员干嘛),我要是到处找人去问,谁有那么多时间伺候我。还不是自己去跟踪、断点、分析、查询,来解决吗?不亲自去查一查,你怎么就知道这个问题你自己解决不了。

 

  4.3 对待用户的思考

  现在回到我的角色,我作为一个产品的主导者、开发者,想用户去推广这个产品的时候,如何面对用户的各种使用习惯——我觉得关键在于要去带头建议一种环境和平台来引导用户

  这个开始虽然很难、很慢,但是一旦建立起来,就会比较自然顺畅。例如一个新的使用者解决的第一个问题是从github issue得到的答案,那么他遇到第二个问题自然而然回去github issue查询,如果没有他当然也会在这个平台提问。

  如果他后来遇到了另一个新来的,他肯定会告诉他,去github issues里可以找到答案。

  我想到一句和『授人以鱼不如授人以渔』类似的话——给人一个答案,不如给他一个平台和环境

 

5. 为什么重构

今天的文章其实和技术没有多少关系,重点讲述我对产品的认识。不过它绝对不是一片软文,它再次也算是我的一些经历和一些故事。

  对于产品的重构其实已经是一个很老的话题了,从我们看到很早的书籍就说:产品就是要完善完善再完善、重构重构再重构。但是我所说的是——不要为了重构而重构。重构一定是要解决一个重量级的问题,非重构而不可的问题。

  

  在此我想简述一下我计划的下一次重构对wangEditor的一些影响。

  现在大家遇到一些比较棘手的需求,还是需要求助于我,我没办法去解决的那就算了(例如之前有人提出增加公式,我就没答应,因为就他自个用)。很多人提出了插件机制,我也想过,但是现在的代码框架,确实不足以完美支持。我现在急需这个功能。

  另外,目前项目就是我一个人维护,其实还有其他人想一起来为项目贡献代码。但是现在代码结构比较紧凑,除了我,别人还不好插手。所以,下次重构组件化和模块化也是一个重点。要让各个模块和组件之间相互不影响,保持独立性,又让整体保持扩展性。

  所以,期待我的下次重构吧。有意向咱们可以一起写代码。

6. 产品营销的困惑

  之前阅读《市场驱动的新产品研发项目管理》一书,记住了上面的一句话——一个企业的核心竞争力有两点:一个是技术,一个是营销。我曾经问过一个今年刚刚毕业的同事,问他能不能理解,他说不能。我不知道您现在看到这句话能不能理解,反正我是小有感触。

  就拿wangEditor来说,我如何让大家都知道这个产品?如何推广出去?现在是我很大的一个困惑。特别是对于这种不知名的个人开发的产品(大牛和大公司推出的产品好推广),纵然你有一腔热血,但是无人知道,你说是不是很郁闷。现在你知道为何『营销』是核心竞争力了吧。如果咱俩有同样的产品,你先让大家知道了,那么你就赢了。

  现在这块正是我的一个困惑。写一篇博客推广吧,上次写的某某版本发布,被博客园踢出了首页。大家如果有好的建议,不妨提交给我,万分感激。

7. 关于移动端编辑器

  移动端编辑器的开发,最初是由群里的几个同学提出来的,需求量并不大。如果是就几个人提出一个PC端的个性需求,我直接就拒绝了。我也跟很多人聊过,大部分的反馈都是大家不会用手机去编辑什么打内容的片段。

  我之所以启动移动端编辑器,是因为现在网络上根本没有哪怕是不成熟的移动端编辑器。那些所谓兼容移动端的编辑器,无非就是UI上做了个响应式的布局而已,用户体验上根本不适合手机触屏操作。

  没有的东西我就要去做,苹果都未移动端准备了ipad pro 我为何不能做一个小小的编辑器呢?至于以后发展如何,我现在不管,想多了啥也干不成。

  

  虽然开发刚刚启动,但是想法和规划早在两个月之前就开始了,我也经过了大量的调研、思考、实验,最终确定了现在的实现思路。

  

  手机扫描二维码预览Demo(功能不全面)

   

 

  接着说。我本来想把菜单栏紧贴在虚拟键盘上方,可以犹豫技术限制、又是一个插件,做不到这一点,因此只好做一个取舍,放在了上面。 

  在我看来,手机端和PC端最大的区别就在于手和鼠标的不同。鼠标可以轻松选区一段文字进行操作,而手指则无法轻松做到。因此,手机端的编辑器的功能和操作肯定要和PC端的不一样。具体的大家可以去demo中体会。 

  另外,在移动端大家不可能做很大篇幅的编辑操作,因此需要的功能就更为精简。基本的文字粗体、颜色、标题,外加上传图片、拍照上传(重要),还有表情,就OK了。

  最后,在开发移动端编辑器的时候,我一定会增加用户自定义配置、扩展菜单的功能。有些特殊的需求,自己来开发就OK了。 

8. wangEditor的初衷变了吗?

  唉妈呀,写了将近三个小时,洋洋洒洒将近5000字,这得顶的上多少篇高考作文啊!其实我很讨厌这种冗长的东西,不过没有这些内容,今天的话题就说不完。如果看这篇文章的你没有耐心看完,那么也不是你的错。

如有错别字,请多多包涵。。。。 

  最后我想说,wangEditor做上文这样的规划,是不是违背了它当时的初衷和定位了呢?一开始做wangEditor,我对它的定位是——一款最简单、易用的编辑器

  重量级的复杂的编辑器(如百度ueditor、kindeditor)什么都有,插件丰富,但是使用起来没有那么方便、UI也丑的要死。wangEditor要跟他们形成互补——UI设计的最漂亮、使用最简单、要轻量化。

  我的观点是,wangEditor最初的定位和初衷,到现在根本没有变化,后面也不会有变化。而我现在要做的,是让它跨步到一个更高级的层次,无论是对于我、未来的其他代码贡献者、还是这个产品的使用者

  wangEditor已经不再是一个技术人员的练手实验品,而它将继续是一款更好的产品,我也会为此而付出更多的努力来。

  编辑器这个东西很小,但是别忘了,绝大部分web系统都需要,绝大部分网民都需要,这样它就会变得很大!

 

 共勉!

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

学习作者教程:《前端JS高级面试》《前端JS基础面试题》《React.js模拟大众点评webapp》《zepto设计与源码分析》《json2.js源码解读

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

也欢迎关注我的开源项目——wangEditor,轻量化web富文本编辑器

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

 

posted @ 2015-11-03 08:43 王福朋 阅读(...) 评论(...) 编辑 收藏