Refactoring Wangeditor (Web Rich Text editor), please correct me!

1. Preface

(Download source code, instruction, demo, see: Https://github.com/wangfupeng1988/wangEditor)

I did a bootstrap-based Rich text editor--wangeditor and posted it on GitHub (Https://github.com/wangfupeng1988/wangEditor), Writing an article in the blog Park (http://www.cnblogs.com/wangfupeng1988/p/4088229.html) also received a lot of attention.

The reason for this refactoring is for the following reasons.

• First, Bootstrap. It is a bit of a fuss to make a small web Rich text editor that relies on Bootstrap. It was a bit lazy to rely on bootstrap to save me the time of drawing buttons, drop-down boxes and pop-up boxes. Therefore, this refactoring discards the bootstrap.
• Second, browser restrictions. As a result of its own use of bootstrap, only to consider the compatibility of Bootstrap browser, ie low version of the browser is not considered, this is a disadvantage. Therefore, this refactoring is compatible with all browsers .
• Third, a careful friend looked at my code, gave me some advice (albeit with some little kindness in the words), he said "the code is not elegant", in fact, my understanding is poor extensibility. Therefore, this refactoring, fully consider the extensibility . You can agree to define your own menu.

Just, the reconstructed wangeditor is still very lightweight, a more than 10 KB JS file, a 3KB css file, done! It is also very easy to use. One line of code is done:

// in fact, the $editor returned is a jquery object that can do whatever jquery does, such as $editor. HTML (), $editor. Text () var $editor = $ (' #txtDiv '). Wangeditor ();

2. Discard bootstrap, develop your own style and effect

After you discard the bootstrap, you have to develop your own styles and effects.

First, the menu style and layout is actually very easy, you can see the effect should be clear. I still use the fontawesome as an icon font library, not clear to see the "Please replace the page icon small icons fontawesome."

Second, I made a tooltip effect, that is, the mouse on the button, pop-up small box prompt title,

Third, a button with a drop-down box type, and a downward arrow on the right side, such as. After clicking, the drop-down box pops up and the drop-down box is hidden after blur (loses focus).

Four, I made a pop-up box effect, pop-up box display, below the mask layer hides the entire content of the page, do not agree to click.

3. Compatible with IE low version browser

First of all, thank Fontawesome is compatible with IE low version of the browser, otherwise I will have to go to draw icon icons, that can be a big trouble.

Style and effect compatible with IE low version number should be no problem, big deal support HTML5 can show round corner, ie low version number does not show rounded corners, this effect is not small, also does not affect the use.

The most basic compatibility is that the IE low version of the implementation of the "choice" and "scope" of the technology, and the world wide, it has its own set of logic. Do not know this piece of friends, can think of IE in the event processing, whether it is bound events or the processing of event parameters, and the Internet is not the same, is very annoying!

In order to achieve compatibility, it is necessary to fully consider the two different implementation methods of "select" and "Scope", do browser compatibility test, and then according to different situations, write different code. To give a sample example:

varSupportrange =typeofDocument.createrange = = = ' function ';if(supportrange) {// theSelection =document.getselection ();            Selection.removeallranges ();        Selection.addrange (Currentrange); }Else{            //ie8-Range =Document.selection.createRange (); Range.setendpoint (' Endtoend ', Currentrange); if(CurrentRange.text.length = = 0) {Range.collapse (false); }Else{range.setendpoint (' Starttostart ', Currentrange);        } range.select (); }

By looking at this code, you can be broadly clear that the two implementations are fundamentally different.

4. Consider the scalability of the system

I saw a lot of design patterns in the first half of the things, also done a design model of the tutorial "from design to Mode", also studied Jquer source code, the system of "extensibility" or have a certain understanding. The wangeditor before refactoring, because the emphasis is on the realization of rich text function, but neglected the extensibility problem. This time refactoring, I thoroughly considered.

In fact, for the Rich text editor, the main extensibility should consider the following points:

• Compatibility of the Internet and IE's low version number;
• How to expand the menu, how to define the sorting, grouping, showing/hiding;
• How to expand the command (such as bold, font color, etc.), how to make up for the browser is not intact;
• Basic configuration (font, color, font size) how to expand;
• ......

These extensibility issues are considered in this refactoring, and the corresponding implementations are made. A well-scaled system will help developers to upgrade, configure, and so on with clearer ideas.

5. Next step ...

Next I want to do a few examples, such as uploading images, inserting the highlighted code, to show how to use Wangeditor.

Next, I will introduce the source code of Wangeditor, and explain how to implement a rich text box.

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

Please pay attention to my Weibo.

Also welcome to follow my tutorials:

" from design to model" "in- depth understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 source code Interpretation video" "Json2.js Source code interpretation video"

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

Refactoring Wangeditor (Web Rich Text editor), please correct me!