Lightweight web rich text box -- wangEditor User Manual (4) -- configuration drop-down menu, wangeditor User Manual
1. Introduction
The previous section (section 3) lightweight web Rich Text Box-wangEditor User Manual (3)-How to customize a configuration menu describes how to customize a newly added menu. In section 2, we demonstrate how to add a simple menu. In this section, we will add a slightly more complex menu-drop-down menu type --Add a "set title" drop-down button
:Https://github.com/wangfupeng1988/wangEditor
Demo:Http://www.cnblogs.com/wangfupeng1988/p/4185508.html
Chat QQ group:164999061
2. wangEditor menu type
Review Section 2. In the "3.1 Type Analysis" section, we have introduced three menu types in wangEditor:
- Basic menu: One-Step operations (mouse clicks and shortcut keys) can be completed without selection or input, such as "bold", "list", and "center;
- Drop-down box menu: Click the button to bring up the drop-down box, and the drop-down box is the real performer. Select a drop-down box option;
- Pop-up menu: Click the button to bring up the dialog box. In the pop-up box, you need to enter some content. A button in the pop-up box is the real performer;
The "indent" button shown in section 2 belongs to the first type-Basic menu."Set title"Belongs to the second type-drop-down box menu.
3. Add the "set title" button 3.1 to reference the first code
Create an html page and reference the code of section 1 (if you have not read section 1, you can check it first ):
3.2 "set title" menu Configuration
When the "indent" button is added in section 2, we have made menu configuration. The menu configuration of the "set title" button is as follows:
Next, we will explain the configuration of these menus step by step.
3.3 menuId & Title & txt & callback & shortcut keys
In:
- ['Head'] is the menuId, which cannot be the same as other menuId;
- ['Title': 'set title'] This is the title. You can use a name to prevent the title from being displayed on the menu;
- ['Txt ': 'fa-flag-O'] is the fontAwesome font style;
- ['Callback': function () {...}] The Custom callback function, which will be called after the command is executed;
- In addition, shortcut keys are not supported for menus of the drop-down box type;
In fact, the above items have been described in detail in the second section. Here we will not go into details. If you do not understand them, you can go to the second section.
3.4 'type': 'dropmenu'
When the "indent" button is added in section 2, the type is 'btn 'because it is a basic button. The "set title" here is the drop-down box button, so the type is 'dropmenu '.
In addition, the type of the third menu type is 'modal', which will be discussed in the following article.
3.5 'dropmenu': (function (){....})()
As long as the type is 'dropmenu', all menu configurations must have a 'dropmenu' attribute, which requires a $ (ul ). Each li in ul (actually link a in li) stores each value in the drop-down box.
This value is stored in a specific commandValue attribute. For example, the commandValue attribute stores the value of each li.
3.6 command
When the "indent" button is added to section 2, the command attribute is also available. However, the command here is different from the command here. The difference is: -- for example:
- Document.exe cCommand ('indent ');
- Document.exe cCommand ('formatblock', false, '
No difference is found. In section 2 -- that is, when the basic button is configured -- command only performs a parameter operation. Because it is a basic operation and does not require the third parameter, you only need a command and no value.
For example, "bold", "italic", and "indent", you only need one 'bold ', 'italic', and 'indent 'command. The "set title" button requires not only the 'formatblock' command, but also the h1/h2/h3/h4 or P Title to be set? This value is located in the commandValue attribute of each li in the drop-down list.
The basic button is the command for a parameter operation. In section 2 [3.9 command(document.exe cCommand command name)], you have explained it. For more information, see.
Command commands that need to be passed in parameters are listed in "javascript advanced programming-Third Edition" (but not necessarily applicable to the drop-down box, and some suitable for the pop-up box ), the green part has been implemented in wangEditor, and it seems that the "formatBlock" being demonstrated in this article is left.
3.7 add to menu bar
The "set link" menu configuration has been configured above. The menu bar will be added below. If you have read the content of section 2 and section 3, it is not difficult to look at the following code. After the menu bar is added, wangEditor automatically generates a drop-down menu for the button. The effect is as follows:
4. Summary
This article briefly introduces the implementation method of the drop-down box button. In fact, we can also see the design method of wangEditor from this configuration method.
The code in this document can be obtained from the downloaded deployment demo_head.html. Next, we will introduce a bit of cool content-insert code!
Bytes -------------------------------------------------------------------------------------------------------------
:Https://github.com/wangfupeng1988/wangEditor
Demo:Http://www.cnblogs.com/wangfupeng1988/p/4185508.html
Chat QQ group:164999061
Bytes -------------------------------------------------------------------------------------------------------------
Welcome to my Weibo.
You are also welcome to follow my tutorial:
From design to Model《Deep understanding of javascript prototype and closure SeriesMicrosoft petshop4.0 source code explanation video json2.js source code interpretation video
Bytes -------------------------------------------------------------------------------------------------------------