Lightweight Web Rich text box--wangeditor user's Manual (4)--Configuration drop-down menu

1. Introduction

Previous section (section III) the lightweight web Rich text box--wangeditor user's Manual (3)--How to customize the configuration menu describes how to customize the configuration of a newly added menu. In the second section we demonstrate how to add a simple menu, which we want to include in a slightly more complex menu-drop-down menu type- Add a "set caption" Drop-down button

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

Demo Demo:http://www.cnblogs.com/wangfupeng1988/p/4185508.html

Chat QQ Group:164999061

2. Wangeditor Menu Type

Recalling section II, in the section "3.1 Type analysis," We have introduced the total of 3 menu types in Wangeditor:

1. Basic Menu : one-step operation (mouse click, shortcut key) can be completed, no choice, no input, such as "bold", "list", "center" and so on;
2. Dropdown Box Menu : Click the button just to pop up the drop-down box, and the drop-down box is the real performer, you need to select a drop-down box option;
3. pop-up menu : Click the button just for the popup box, in the pop-up box need to fill in a number of content, pop-up box a button is the real performer;

The Indent button shown in the second section belongs to the first type-the basic menu, and the section "set title" belongs to the second type-drop-down box menu.

3. Add the "Set caption" button 3.1 to refer to the first section of code

Create a new HTML page that references the first section of the code (friends who have not seen the first section can go to see it first):

3.2 Menu configuration for "set title"

We did the menu configuration when we added the Indent button in the second section. Here is the menu configuration for the Set caption button:

Next we will explain the configuration of these menus step by step

3.3 MenuId & title & TXT & callback &shortcut Keys

In the:

1. "' Head '" is menuid, this identifier cannot be duplicated with other menuid;
2. "' title ': ' Set title '" This is the title, the name of your own casually taken, the mouse to prevent on the menu when the title will be displayed;
3. "' txt ': ' FA fa-flag-o '" is the Fontawesome font style;
4. ' ' Callback ': function () {...} "Custom callback function, the system will be called after the command executes;
5. In addition, the dropdown box type of menu does not support shortcut keys;

In fact, these several, in the second section have been described in detail, here on donuts, no longer repeat, do not understand the friend can go to see the second section.

3.4 ' type ': ' Dropmenu '

In the second section, when the Indent button is added, the type is ' btn ' because that is a basic button. Our "Set caption" is a drop-down box button, so the type is ' Dropmenu '.

In addition, the third type of menu types is ' modal ', this next article will be specifically said.

3.5 ' dropmenu ': (function () {...}) ()

As long as the type is ' Dropmenu ' of the menu configuration, there must be a ' dropmenu ' attribute that it wants to get a $ (UL). Each li in the UL (in fact, link a in Li) saves each value in the drop-down box.

This value is stored in a specific commandvalue attribute . such as the Commandvalue property, the value of each li is saved.

3.6 command

When you include the Indent button in the second section, it also has the Command property. But the command here differs from the command here--for example:

1. Document.execcommand (' indent ');
2. Document.execcommand (' Formatblock ', false, '

Discover the difference is not, in the second section--that is, the basic button configuration when--command performs just one parameter operation. Because it is a basic operation, no third parameter is required, only one command is required and no value is required.

For example "bold", "Italic", "indent", these need only a ' bold ', ' Italic ', ' indent ' a command. The "Set caption" button requires more than just the ' formatblock ' command, but it also needs to know if the title you want to set is H1/H2/H3/H4 or P? this value, the system is to be looked up from the Commandvalue property of each Li in the drop-down box.

The basic button, that is, a command command for a parameter operation, is explained in section II, "3.9 Command (Document.execcommand)", which is preferable to reference.

command commands that need to pass in parameters are listed in the JavaScript Advanced Programming-third edition (though not necessarily suitable for use with drop-down boxes, some suitable for use with pop-up boxes), where the green part is already implemented in Wangeditor, and it seems that the remainder of this article is demonstrating " Formatblock. "

3.7 Adding to the menu bar

The above has been configured for the "Set link" menu configuration, the following to be added to the menu bar. If you look at the contents of section Two and section three, then it should not be difficult to see the following code. After you join the menu bar, Wangeditor automatically generates a drop-down menu for the button. The effect is as follows:

4. Summary

This paper briefly introduces the implementation of the drop-down box button, in fact, from this configuration can also be seen in the design of the Wangeditor way.

The code in this article can be obtained from the "demo_head.html" of the downloaded content. Next we will be a little cool content-insert code!

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

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

Demo Demo:http://www.cnblogs.com/wangfupeng1988/p/4185508.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 (4)--Configuration drop-down menu