【个人产品观】开发wangEditor一年总结

1. 引言

　　标题说是一周年，实际上是不是正好是一周年，我也忘记了，光从github的提交记录看也不许确。印象中以为，若是要论想法，到如今一年多了，若是要论实际写代码，可能差很少正好一年。

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

　　感受对这几方面的体会和感悟仍是挺多的，拿出来和你们分享。

2. 什么鬼？

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

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

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

• 官网、demo、捐赠：www.wangEditor.com
• github：https://github.com/wangfupeng1988/wangEditor
• 文档：http://www.kancloud.cn/wangfupeng/wangeditor/65722

　　

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

　　

　　手机扫描二维码预览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富文本编辑器

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