我为何要作富文本编辑器【wangEditor5个月总结】

本文是几年前写的，直接访问 wangEditor 官网 www.wangEditor.com 了解最新版的编辑器

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

1. 为何要作富文本框？

　　一说到web富文本编辑器，不少人的印象就是网上一搜一大把，巴不得扔个砖头都能砸一片。不错，确实一搜一大把，可是真让你说一下名字，你能说出几个来？——估计没多少吧？国外的就不用说了，文档看不懂，更新不更新还不知道，有bug也很差调试。国内作的比较好的我知道有百度的UEditor和kindEditor。

　　可是这两个也有它的缺点：界面过于复杂、不够简洁、UI设计也比较落后、不够轻量化……

　　所以，我要作一个最简单易用的富文本编辑器。因而乎在2014年11月，我推出了开源富文本编辑器——wangEditor

1. 下载地址：https://github.com/wangfupeng1988/wangEditor
2. demo演示：http://www.libre-free.com/interface/wangEditor-master/demo.html （借用好心网友的服务器，感谢他的支持）

　　

2. 产品如何定位？

　　一个产品推向市场，势必会面临着用户和竞争对手，如何让用户使用本身的产品而不用竞争对手的产品，这是必需要考虑的问题。

　　咱们先说一个我在平常工做中常挂嘴边的一个词——2/8原则。你们应该都据说过这个东东，2/8原则符合这个社会的任何环境：国家20%的人拥有80%的财富、公司20%的人创造80%的业绩、软件20%的功能知足80%的需求……

　　同理，对于富文本编辑器来讲，也是20%的功能知足80%的需求，剩下的80%的功能只是为了那20%的需求。我要作的就是这20%的功能，去知足你们80%的需求。若是你想要大而全富尔美，那么wangEditor知足不了你（这会让你付出不少代价）；若是你想用最快的方式知足你最主要的需求，那就请使用wangEditor。

　　所以，wangEditor的定位是作最简单、易用、快捷、轻量化的富文本编辑器。我要把这20%的功能作精致，把UI设计的更加简洁漂亮，让你一看就很舒服。

　　wangEditor使用教程以下：https://github.com/wangfupeng1988/wangEditor#1-%E4%BB%8B%E7%BB%8D，应用很是简洁，你们能够去看看。

　　不要觉得作简单了就没人用。你们对Visual Studio、Eclipse有需求，可是editplus这种轻量级的软件，你就不用了吗？

3. 一次被喷

　　我为wangEditor建立了一个QQ群（群号：164999061，欢迎你们加入），如今里面只有40多我的。我自己也不大喜欢聊天，上班时候工做，下了班就看书、写代码、写博客，也没有处处去推广该群，所以人少了些。

　　去年，忘记何时了，反正是wangEditor仍是初版（还依赖于bootstrap2.0）的时候，有一个哥们在QQ联系我说要和我经过github合做开发，而后我很高兴的赞成了。结果他看了个人源码，说个人代码写的不够优雅（对，就是“优雅”这个词），说这种小儿科的东西高手分分钟就能够作出来，要给我重构。我说你要给我重构，你本身作一个不就完了吗？后来俩人胡扯乱扯的扯了好多。最后他在群里丢下两句很鄙视个人话，就退群而去了。

　　我今天在群里翻看了好一下子，想找到当时他说的啥，截个图给你们看看。但是沉底儿很久了，我期间也换了手机，找不到了。大致意思就是：这个产品也就是写着玩玩，这种代码小儿科根本上部的厅堂，根本不能用……

　　当时我也没有生气。由于这个东西毕竟是面向用户的，一个用户一个口味，任何一个产品都不可能获得全部人的赞同。若是有10000我的喜欢你，至少也得有2000我的在骂你。后来群里有好心人安慰我：不要理喷子，继续努力……

　　的确，我没有理会他，而是继续优化代码、重构、再重构。我认可我初版的代码写的很不咋的，毕竟第一次作，jQuery最初也是经历了几回重构才稳定下来的。可是通过这两次重构以后，若是以前喷个人那哥们再来看看个人源码，他绝对不会说不够优雅。

　　下面继续说产品的两次重构经历。

4. 两次代码重构

　　这里只说js代码的重构，UI设计的重构下文会提到。

　　初版js代码（原版）

　　说实话，初版js的代码，我如今所有忘记了。就像我高考时候，数学考试刚刚结束，出来以后居然忘记最后一道大题是什么。但印象中初版的js就像一个流水线同样，页面上须要什么，我就用写什么。数据结构、面向对象、设计原则等等这些彻底都没有考虑——怪不得人家说个人代码不够优雅！

　　你们先不要笑话我。根据个人经从来看，不是我不想作好设计，而是富文本编辑器这个东西，看着很简单，其实作起来仍是蛮复杂的。毕竟第一次作，有些东西想不到，缝缝补补是不免的。

　　再者，产品是一版一版发布迭代的，好的软件是重构出来的、不是一会儿设计出来的。你不要指望花10个月的时间一会儿设计一个好软件，可是你能够一个月升级一版，经过10次升版作出一个好软件。

      

　　第二版js代码（第一次重构）

　　此次重构个人目的是两个字——“扩展”——这说明我开始思考设计了。设计原则的一个最高要求就是开放封闭原则——要求系统经过扩展来应对需求变化。所以我就思考：如何让开发者使用wangEditor经过二次开发扩展本身的菜单按钮和自定义的功能。

　　想到了就作！光写完程序还不行，还得配上完善的用户手册。因而我又花了很大精力去写二次开发手册，还发布到博客园上。可是后来证实个人这个想法是失败的。不是由于我作的功能不行，而是由于不知足用户需求——用户不会耐烦去作二次开发的，他们就想拿来就用，谁耐烦给你二次开发？

　　虽然我此次想多了，可是此次重构也是有意义的。通过此次重构，我能够关闭对外扩展的API，可是内部扩展功能仍是有好处的。所以，通过这一次重构，系统代码完全就走出了“蛮荒时代”，开始进入“文明社会”了。

　　可是，再次重构的时候要想一想：不要求全面、但要求精致，作什么事情都要围绕着目标和定位而行。

 

　　第三版js代码（第二次重构）

　　这一次重构的想法是今年春节，放假在家买了一本《基于MVC的JavaScript Web富应用开发》，花了几天时间看了看。也许是由于我蜻蜓点水的看的不仔细，这本书我没看出多少道道（如今计划从新再看一遍）。可是看书期间我忽然想到了：wangEditor的代码是否是面向对象的？对象、变量是否是都结构化了？——这样一想，还真不是。

　　因而回来以后，我通过一段时间的思考和准备，我又大胆的作了第二次重构。前先后后通过了两周的时间，才整理完成，发布到Github上。通过此次重构，使得wangEditor代码真正进入面向对象的世界，并且代码还模仿了jquery的设计思路，我以为挺有意思。

      

　　接下来的重构

　　就在第二次重构刚刚完成时，我脑子里又忽然想到了一点——是否须要MVC？能想到这一点很是好，可是不要急于去修改。重构不能太频繁，要否则系统不容易稳定。并且，是否用MVC、如何用MVC仍是要通过一段时间的考虑。也许在几个月以后，我会再为了MVC重构一次。可是谁知道呢？

 

5. 五次UI升级

　　第一版

　　这是基于bootstrap2.0实现的初版界面，按钮尚未扁平化，布局也比较简陋。

　　

 

　　UI升级1

　　后来将升级为基于bootstrap3.0，按钮扁平化，菜单栏和编辑区整合到一个容器中。感受比之前美观了许多。

　　

 

　　UI升级2

　　后来摆脱了bootstrap的依赖，本身实现了菜单栏的样式，去掉了按钮的边框，使得UI更加简洁。可是这些菜单按钮是基于fontAwesome字体库的。

　　

　　

　　UI升级3

　　fontAwesome是一个很完善的字体库，里面有400多个icon图标，致使字体文件很大，影响加载速度。这400多个字体库中，我能用到的也就是20个左右，所以根本不必在继续依赖fontAwesome。所以，我经过www.fontello.com自定义封装了本身的字体库，用多少就封装多少，字体文件的大小变为原来的7.74%，加载速度快了不少。并且，不用再告诉使用者“首先你必需要引用fontAwesome.css……”大大下降学习成本（所以好多人根本不知道什么是fontAwesome）。

　　

 

　　UI升级4

　　成天看IT互联网的新闻，看到office2016的曝光界面，所以有了从新设计UI的想法，因而就作了以下界面。（若是不喜欢，想回到传统风格，也是能够配置的。Github中有说明）。并且，界面的色调都是可配的，虽然默认的是深灰色色调，可是你能够经过简单的调整几个颜色值，来实现你想要的任何色调，github中有说明。

　　

 

　　UI升级5

　　这是近期修改的，是一次小改动。之前菜单栏的分组用一个竖线“|”，而本次真正的分开了。相比上一个界面，本次使得菜单分组更加清晰，一目了然。

　　

 

6. 下一步的计划

　　接下来，近期不会对代码作太大的调整，以完善和优化为主。近期也不会增长复杂功能，可是会把当前的功能继续优化，优化UI界面、用户体验等等。

　　总之我以为作产品要有一个工匠的心，每时每刻都要反复琢磨，如何才能让产品最优。只要本身作个有心人，多去观察多去参考，产品确定作的愈来愈好。

　　一个重要工做，接下来我要把wangEditor.com网站搭建起来，域名和空间都注册了，只是一直没来及备案和绑定。

7. 交流&建议

交流QQ群：164999061 
二次开发联系：wangfupeng1988#163.com（#->@）

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

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

也欢迎关注个人开源项目——wangEditor，轻量化web富文本编辑器

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