Lightweight Web Rich text box--wangeditor user's Manual (5)--Configure the "Insert Code" feature

1. Introduction

If you have been watching this series of friends, you should know that the Wangeditor menu is divided into three types: basic, drop-down menu, popup box; In the previous section we explained how to configure a drop-down menu button by using a "set caption" Example Wangeditor In this section we use a very cool feature-insert code-to see how the Popup-type menu is configured.

Is it ready?

:https://github.com/wangfupeng1988/wangEditor

Demo Demo & All configuration instructions:http://www.cnblogs.com/wangfupeng1988/p/4198428.html

Chat QQ Group:164999061

2. IntroduceWanghighlight.js

The code highlighting feature is a tricky thing to do, especially if you want to support multiple languages and multiple theme styles. So, we're not here to reinvent the wheel, directly referencing an existing plugin--wanghighlight.js--it does not require any CSS-style references, supports more than 20 commonly used languages, and a variety of commonly used theme styles.

Wanghighlight.js Use tutorial:https://github.com/wangfupeng1988/wangHighLighter

Wanghighlight.js:https://github.com/wangfupeng1988/wangHighLighter

Wanghighlight.js Demo Demo:http://www.cnblogs.com/wangfupeng1988/p/4192911.html

This article will use it to assist in the "inserting Code" functionality. but note: wanghighlight.js How to apply, the following will not be too much to explain, so also need to bother you to see Wanghighlight.js use tutorial-very simple, a few lines of code, one can understand --Link: https:// Github.com/wangfupeng1988/wanghighlighter

3. Add the Insert Code button

Through the second section, the third section, the fourth section, how to configure a menu, how to add to the menu bar, how to sort, everyone should be very clear. So, this article is no longer detailed description of these details, the description is too lengthy too clear look more trouble.

3.1 Introduction of WangHightLight.min.js

If you want to use Wanghighlight.js to handle code highlighting, you have to refer to it first:

3.2 Structure of the overall code

We have listed the overall structure of all the code used to do the "Insert Code" feature. The red frame in the chart is what we are going to focus on.

Note : First, this is only a structure, not the final code; second, not the red frame, but you do not understand, it is estimated that you did not see the second section, the third section, the fourth section;

This is a code framework, but after we run, we can see a certain effect--the menu bar added an "Insert Code" button, click and then pop up a popup box to see:

3.3 ' type ': ' Modal '

' Type ' represents the type of the button, wangeditor in a total of three types, the first two types, we respectively in the second section, the fourth section of the explanation, this article is the third. Such as:

As the name implies, ' type ': ' Modal '-meaning pop-up box type. However, the pop-up boxes under different scenarios are not the same for size, so Wangeditor offers four sizes to choose from: Modal-big, Modal, Modal-small, Modal-mini.

3.4 Command & Hotkey

Pop-up box type, does not support shortcut keys, that is, hotkey is not supported. In addition, the operation of the popup box is generally complex, cannot complete the task with simple command command, therefore, also does not support the Command property.

These two do not support, you write is also white write.

3.5 ' modal ' (Focus! ）

In the fourth section, the Dropmenu type of menu configuration has a ' Dropmenu ' attribute (if you forget, you can look back)

Similarly, the popup box type of the menu configuration, also need to have a ' modal ' property, it is actually received is a $ (' Div1 '), a DIV element (such as). The content of this div will be wangeditor processed as a popup box, which pops up when the button is clicked (as can be seen in the "structure of the 3.2 overall code" above)

However, the code is used only for demonstration purposes, and the real code is more complex than this. Now I'm pasting the whole ' modal ' code, and I'll explain some of the important things:

1' Modal ': (function(){2     varLangId = Wangeditor_getuniqeid (),//Wangeditor_getuniqeid () is a method provided by Wangeditor that can get a unique ID3Themeid =Wangeditor_getuniqeid (),4Codeid =Wangeditor_getuniqeid (),5Btnid =Wangeditor_getuniqeid (),6 7         //Define modal8$modal = $(9' <div> ' +Ten' Language: <select id= ' + langId + ' "></select> &nbsp;&nbsp; ' + One' Theme: <select id= ' + Themeid + ' "></select> ' + A' <textarea id= ' + Codeid + ' "style=" width:100%; height:150px; " ></textarea> ' + -' <button id= ' + Btnid + ' "> Insert </button> ' + -' </div> ' the         ), -  -         //Define callback -callback =function(){ +$modal. Find (' textarea '). Val ('); -         }; +  A     //because you want to bind a drop-down box for a language, a theme, you must attach the $modal to the page first, or you cannot get the Select node.  at$ (' body '). Append ($modal); -          -     var$LANGSLT = $ (' # ' + langId),//Get individual Dom -$THEMESLT = $ (' # ' +Themeid), -$CODETXT = $ (' # ' +Codeid), -$BTN = $ (' # ' +Btnid), in  -         //get an array of languages, topics toLangarray =Wanghighlighter.getlangarray (), +Themearray =Wanghighlighter.getthemearray (); -  the     //Binding Language *$.each (Langarray,function(key, value) { $$langSlt. Append ($ (' <option> ' + value + ' </option> ')));Panax Notoginseng     }); -     //Binding Topics the$.each (Themearray,function(key, value) { +$themeSlt. Append ($ (' <option> ' + value + ' </option> '))); A     }); the  +     //"Insert" button click event -$btn. Click (function(e) { $         varLang =$langSlt. Val (), $Theme =$themeSlt. Val (), -Code =$codeTxt. Val (), - result; the         //Highlight Code -result =wanghighlighter.highlight (lang, theme, code);Wuyi         //inserting code theWangeditor_commoncommand (E, ' inserthtml ', result, callback);  -         //(Wangeditor_commoncommand (E, CommandName, Commandvalue, callback) are the commands provided by Wangeditor) Wu     }); -  About     //back to $modal $     return$modal; -})()

all code for ' modal '

3.5.1 Wangeditor_getuniqeid () method

Wangeditor_getuniqeid () is a method provided by Wangeditor that can obtain a unique, non-duplicate ID. Also, each time the function is executed, a different ID is obtained.

3.5.2 Wangeditor_commoncommand () method

The Wangeditor_commoncommand (E, CommandName, Commandvalue, callback) functions are functions that the wangeditor exposes to execute commands that all commands can use to execute.

Explanation of the parameters:

1. E-javascript event parameters (optional), if it is a JavaScript event triggered by the command operation, be sure to pass e in;
2. The first parameter of the Commandname-document.execcommand (must);
3. The third parameter of the Commandvalue-document.execcommand (optional);
4. Callback-Incoming custom function, execution (optional) after execution of the command;

Here are a few examples of use:

3.6 Run

After some code is ready, run the Web page to see the effect:

4. Summary

One of the highlights of the wangeditor is the "Insert code" when it's just started and relies on bootstrap. But after refactoring, there was no time to add this feature. It's finally over today.

In addition, the code used in this article can be obtained from the demo_insertcode.html of the downloaded content. Demo demo of this article: http://www.cnblogs.com/wangfupeng1988/p/4198513.html

Next, I will put the uploadify control to come over, in the Wangeditor to upload files, upload the image function. Wait patiently!

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

:https://github.com/wangfupeng1988/wangEditor

Demo Demo & All configuration instructions:http://www.cnblogs.com/wangfupeng1988/p/4198428.html

Chat QQ Group:164999061

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

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"

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

Lightweight Web Rich text box--wangeditor user's Manual (5)--Configure the "Insert Code" feature