Lightweight Web Rich text box--wangeditor user's Manual (3)--How to customize the configuration menu

1. Introduction

Previous section, lightweight Web Rich text box--wangeditor user's Manual (2)--Extending an indent function Finally, the new menu cannot be placed just after the menu by default and should be customizable anywhere in the current menu bar. This section covers the use of several custom configuration menus currently supported by Wangeditor.

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

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

Chat QQ Group:164999061

The menu configurations supported by Wangeditor are available in the following ways, as explained below

1. Mandatory customization;
2. Custom hide some menus;
3. Insert several menus in front of the known menu;
4. Append several menus to a known menu;

2. Force Custom & Custom Hide

In the first section, the Lightweight web Rich text box--wangeditor user Manual (1)-Basic application, 4. Custom menu Configuration "has been described in detail, forgotten friends can go to see."

Both of these situations are in the first section because they are the most basic applications. That is, if you do not need to customize the Insert menu, only the current default menu to operate, these two are enough.

3. Insert several menus in front of a known menu 3.1 reference the code in the previous section

First of all, we need to refer to the previous section of the code (too much code to intercept only the JavaScript section), not much to say here. If you have not seen the last section of the friend, you can go to see first.

This runs directly, the results are already known-two newly added buttons are appended to the end of the menu bar by default.

But what do we do now if we want to put the two buttons before a button, such as the left-aligned button?

3.2 Find the ID of the "Align Left" button

We are looking at the lightweight web Rich text box--wangeditor user Manual (1)-Basic application: "4. Custom menu Configuration "", you already know the current wangeditor default all the menu's ID, here again:

Here we know that the "left" button's ID is "Justifyleft" (as can be seen from the name of the ID and the arrangement of the post-run menu bar)

3.3 Insert before "Align Left" button (case 1)

Directly on the code:

As shown above, to insert the newly created two buttons-"indent", "outdent", plus a "|"-into "justifyleft"--very simply, the code is written out without comment. The effect of the operation is also coming out.

3.4 Insert before "Align Left" button (case 2)

The above is the case of inserting multiple buttons as an array, and in some cases, inserting only one button at a time, without an array--we can use a string!

Such as. The "outdent" button does not work until I insert the "indent" button into the "Justifyleft" button. In this case, the "Indent" button will be obediently inserted into the "Justifyleft", and "outdent" is also very important to append to the custom menu. Still very obedient. And also:

It is also possible to insert two buttons in front of two different buttons, respectively.

3.5 Summary

The above two cases are mainly to express, "insert a number of buttons in front of the known button" This function is more flexible. You can insert either a single menuid or multiple (array form). Furthermore, multiple insertions can be processed at once.

4. Add several menus after the known menu

"Append menu after" and "Insert menu before" are actually the same, and the implementation process is the same. Only the processing command changed from "InsertBefore" to "after". Here are two main applications:

5. Summary

In this paper, a simple paragraph of text, describes how to use Wangeditor when the custom menu configuration, a total of four cases:

1. Mandatory customization;
2. Custom hide some menus;
3. Insert several menus in front of the known menu;
4. Append several menus to a known menu;

In these four cases, you should be able to meet the needs of most people for menu configuration. If there are other good ideas, although the QQ group can give me feedback.

The code used in this article can be viewed from the "demo_menuconfig.html" of the downloaded content

Next, I'll show you how to configure a slightly more complex button (insert code).

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

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

Demo Address: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 (3)--How to customize the configuration menu