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

1. Preface

(Download source code, usage instructions, 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) a while ago. 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. Because of its own use of bootstrap, only to consider the compatibility of Bootstrap browser, ie low-version browser is not considered, this is a disadvantage. Therefore, this refactoring is compatible with all browsers .
• Third, there are careful friends to see my code, I put forward some suggestions (although some of the words are not very good), he said "code is not elegant", in fact, my understanding is poor extensibility. Therefore, this refactoring, fully consider the extensibility . Allows the user to customize the menu.

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

// in fact, the $editor returned is a jquery object that can perform any jquery operation, 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 simple, you can see the effect should be understood. I still use to give Fontawesome as Icon Font Library, do not understand can see "please use Fontawesome instead of web icon small icons."

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

Third, a button that belongs to a drop-down box type, and a downward arrow appears on the right, 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 all the content of the page, do not allow click.

3. Compatible with IE low version browser

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

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

The main compatibility is that the low version of IE to achieve "choice" and "scope" of the technology, and the world wide, it has its own set of logic. Do not know this piece of friends, you can think of IE in the event processing, whether it is bound events or event parameter processing, are not the same as the world, 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 write different code according to different situations. As an 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 (); }

Looking at this code, you can generally understand 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 the source of Jquer, the system of "extensibility" or have a certain understanding. Refactoring before the Wangeditor, because the focus on the implementation of rich text function, and ignore the extensibility of the problem. This time refactoring, I thoroughly considered.

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

• Compatibility with low versions of Internet Explorer and IE;
• How the menu expands, how to customize sorting, grouping, showing/hiding;
• How to extend the command (such as bold, font color, etc.), and how to compensate for the imperfect browser;
• How the basic configuration (font, color, font size) is extended;
• ......

The above-mentioned extensibility issues are considered in this refactoring and implemented accordingly. A well-scaled system will help developers to upgrade, configure, and so on with clearer ideas.

5. Next step ...

Next I want to make a few examples, such as uploading a picture, inserting a highlighted code to show how to use Wangeditor.

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

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

Please pay attention to my Weibo.

Also welcome to follow my tutorials:

" from design to model"" deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

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

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