Why do I need to make a Rich Text editor [wangEditor5 months summary], editor Text editor

Why do I need to make a Rich Text editor [wangEditor5 months summary], editor Text editor
1. Why the rich text box?

When it comes to the web Rich Text Editor, many people are impressed by a search on the Internet, so they can throw a brick. Yes, I did search for it, but I really want you to give it a name. How many can you say? -- Probably not much? I don't need to talk about it outside of China. I don't know the document, update, or update, or debugging of bugs. I know Baidu's UEditor and kindEditor are doing better in China.

However, these two also have their disadvantages: the interface is too complex, not concise, the UI design is also relatively backward, and not lightweight ......

Therefore, I want to createSimple and Easy-to-use Rich Text Editor. In November 2014, I launched an open-source Rich Text Editor --WangEditor

1. : Https://github.com/wangfupeng1988/wangEditor
2. Demo: http://www.libre-free.com/interface/wangEditor-master/demo.html (borrow good friend server, thanks to his support)

　　

2. How to locate the product?

When a product is introduced to the market, it is bound to face users and competitors. This is a question that must be taken into consideration when it allows users to use their own products instead of competing products.

Let's talk about a word that I often talk about in my daily work-the 2/8 principle. Everyone should have heard of this stuff. The 2/8 principle conforms to any environment in this society: 20% of people in the country possess 80% of their wealth, 20% of the company's employees create 80% of their performance, and 20% of software functions meet 80% of their needs ......

Similarly, for Rich Text editors, 20% of the functions meet 80% of the requirements. The remaining 80% of the functions are only for that 20% of the requirements. All I need to do is use these 20% features to meet 80% of your needs. If you want to be big and versatile, wangEditor won't be able to meet you (this will make you pay a lot of costs); if you want to meet your most important needs in the fastest way, please use wangEditor.

Therefore,WangEditor is a simple, easy-to-use, fast, and lightweight Rich Text Editor..I want to make these 20% functions more refined, make the UI design more concise and beautiful, and make you very comfortable at first glance.

The tutorial of wangEditor is as follows.

Do not think that it is easy to use. You have requirements for Visual Studio and Eclipse, but you don't need the lightweight software editplus?

3. One Injection

I have created a QQ Group for wangEditor (group number: 164999061, welcome to join). Now there are more than 40 people. I don't like chatting too much. When I work at work, I read books, write code, and write blogs when I got off work, and I didn't promote the group everywhere, so there were fewer people.

Last year, I forgot about the time. It was the wangEditor or the first version (also dependent on bootstrap2.0). A buddy contacted me on QQ and said that he would cooperate with me through github for development, then I agree happily. As a result, he read my source code and said that my code is not elegant enough (yes, it is the word "elegant"). He said that this kind of pediatric experts can do it in minutes, I want to refactor it. I said you want to refactor it for me. Isn't it enough for you to create one by yourself? Later, they made a lot of crap. Finally, he left the group with two words that despised me, and then left the group.

I looked at the group for a while today. I want to find out what he said at the time and cut a picture to show it to everyone. However, I had to change my cell phone for a long time and couldn't find it. The general meaning is:This product is also written to play, this code is basically the upper part of the department Hall, can not be used ......

I was not angry at the time. After all, this product is intended for users. One user and one taste cannot be recognized by everyone. If 10000 people like you, at least 2000 will scold you. Later, some people in the group comforted me: Don't worry about it, continue to work hard ......

Indeed, I ignore him, but I continue to optimize code, refactor, and rerefactor. I admit that the code for my first version is not very well written. After all, jQuery was first made stable only after several restructures. However, after the two restructures, if the old guy sprayed me back to view my source code, he would never say it was not elegant enough.

Next we will continue to talk about the two product reconstruction experiences.

4. Code refactoring twice

Here we only talk about js Code refactoring. The reconstruction of uidesign will be mentioned below.

First js Code (original version)

To be honest, I have forgotten all the js Code of the first version. Just like when I took the college entrance examination, the math test was just over and I forgot what the last question was. But in my impression, the first version of js is like a pipeline. I will write anything on the page. Data Structures, object-oriented, design principles, and so on are all not taken into account-no wonder my code is not elegant enough!

Don't laugh at me first. According to my experience, I don't want to do a good job of design, but the Rich Text Editor. It looks very simple. In fact, it is quite complicated to do. After all, for the first time, I cannot think of things, but it is inevitable that I have to complete the seams.

Furthermore, the product is an iteration of the first version of the release, and good software is restructured and not designed at once. You don't want to spend 10 months designing a good software at once, but you can upgrade a version one month and make a good software through 10 upgrades.

Second Version of js Code (first refactoring)

This refactoring I aimed at two words-"extension"-which showed that I was thinking about design. One of the highest requirements of design principles is the open and closed principle, which requires the system to respond to demand changes through expansion. So I thought about how to allow developers to use wangEditor to expand their menu buttons and custom functions through secondary development.

Do it as you think of it! It is not enough to write the program, and a complete user manual must be provided. So I spent a lot of energy writing a secondary development manual and publishing it to the blog. But later I proved that this idea failed. It is not because the functions I provide do not work, but because they do not meet user needs --Users don't bother with secondary development. They just want to use it. Who will bother with secondary development?

Although I think more about it this time, this reconstruction is also meaningful. After this reconstruction, I can disable the APIs for external expansion, but the internal expansion function is still advantageous. Therefore, after this restructuring, the system code has completely stepped out of the "wild age" and started to enter the "civilized society.

However, when restructuring again, you should think about it: it does not require comprehensive, but exquisite requirements. Everything should be done around the goal and positioning.

 

Js Code 3 (second refactoring)

The idea of This refactoring is that during the Spring Festival this year, I bought a copy of "JavaScript Web rich application development based on MVC" at home on holiday and spent a few days looking at it. Maybe it's because I'm not careful about reading the book. I don't know much about it (I plan to repeat it again now ). But when I was reading a book, I suddenly thought: Is the wangEditor code object-oriented? Are all objects and variables structured? -- That's not the case.

So after I came back, I thought and prepared for a while, and then I made a bold second refactoring. It took two weeks to complete the sorting and release it to Github. After this refactoring, The wangEditor code has truly entered the object-oriented world, and the Code also imitates jquery's design ideas, which I think is quite interesting.

Next Reconstruction

When the second refactoring was just completed, I suddenly thought of something in my mind-do I need MVC? It is good to think of this, but do not rush to modify it. Refactoring cannot be too frequent, or the system will not be stable easily. In addition, it takes some time to consider whether to use MVC or how to use MVC. Maybe in a few months, I will refactor it again for MVC. But who knows?

 

5. Five UI upgrades

First version

This is the first version of the Interface Based on bootstrap2.0. The buttons are not flat and the layout is relatively simple.

　　

 

UI upgrade 1

Later, the upgrade will be based on bootstrap3.0. The buttons will be flat, and the menu bar and editing area will be integrated into a container. It feels much more beautiful than before.

　　

 

UI upgrade 2

Later, we got rid of the bootstrap dependency, implemented the menu bar style, and removed the button border, making the UI more concise. However, these menu buttons are based on the fontAwesome library.

　　

　　

UI upgrade 3

FontAwesome is a well-developed font library with over 400 icons, which results in a large font file size and affects the loading speed. Among the more than 400 library fonts, I can use about 20, so there is no need to continue to rely on fontAwesome. Therefore, I have encapsulated my own library through www.fontello.com, and the size of the font file is changed to 7.74%. The loading speed is much faster. And again, you must use the fontawesome.css first ......" Greatly reduce the learning cost (so many people do not know what fontAwesome is ).

　　

 

UI upgrade 4

I watched IT Internet news all day and saw the exposure interface of office2016. So I had the idea of re-designing the UI, so I made the following interface. (If you don't like it, you can configure it if you want to return to the traditional style. Github ). In addition, the tone of the interface is configurable. Although the default color is dark gray, you can adjust a few color values to achieve any tone you want. It is described in github.

　　

 

UI upgrade 5

This was recently modified, but it was a small change. In the past, the Group in the menu bar was separated by a vertical line "|. Compared with the previous interface, this makes the menu group clearer and clearer.

　　

 

6. Next Plan

Next, we will not make too many adjustments to the Code in the near future, focusing on perfection and optimization. In the near future, no complicated functions will be added, but the current functions will be optimized to optimize the UI and user experience.

In short, I think there must be a craftsman's heart to make a product, and every moment I have to think over and over again, how can we make the product the best. As long as you are a caring person and observe and reference more, the product will definitely get better and better.

Next, I wantBuild wangEditor.comThe domain name and space have been registered, but it has never been involved in filing and binding.

7. Communication and Suggestions

Chat QQ group:164999061 
Secondary Development Contact:Wangfupeng1988 # 163.com( #-> @)

Bytes -------------------------------------------------------------------------------------------------------------

Welcome to my tutorial:From design to Model《Deep understanding of javascript prototype and closure Series"Css", "Explanation of Microsoft petshop4.0 source code", and "interpretation of json2.js source code"

Welcome to my open-source project --WangEditor, lightweight web Rich Text Editor

Bytes -------------------------------------------------------------------------------------------------------------