Lightweight web rich text box -- wangEditor User Manual (4) -- configuration drop-down menu, wangeditor User Manual

Source: Internet
Author: User

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:

  1. Basic menu: One-Step operations (mouse clicks and shortcut keys) can be completed without selection or input, such as "bold", "list", and "center;
  2. 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;
  3. 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:

  1. ['Head'] is the menuId, which cannot be the same as other menuId;
  2. ['Title': 'set title'] This is the title. You can use a name to prevent the title from being displayed on the menu;
  3. ['Txt ': 'fa-flag-O'] is the fontAwesome font style;
  4. ['Callback': function () {...}] The Custom callback function, which will be called after the command is executed;
  5. 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:

  1. Document.exe cCommand ('indent ');
  2. 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 ModelDeep understanding of javascript prototype and closure SeriesMicrosoft petshop4.0 source code explanation video json2.js source code interpretation video

Bytes -------------------------------------------------------------------------------------------------------------

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.