Lightweight Web Rich text box--wangeditor user's Manual (2)--Extend a "indent" function

1. Introduction

The previous section, "Lightweight Web Rich text box--wangeditor Manual (1)--Basic application" We explained how to apply wangeditor to create the most basic Rich Text editor, this section continues to talk about how to extend a simple button. This section is to continue the previous section of the content, the code used is followed by the previous section, the missing friend please first look at a section, then see this section.

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

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

Chat QQ Group:164999061

2. "Foreplay"

a specific thing cannot satisfy everyone's requirements, but an abstract rule is possible .

So, I think the software is not encoded by the code, but by the brains of the design. I have this experience at work: I never want the things you give me to be perfect, but at least you have to support me to be perfect, and to be able to upgrade and update smoothly .

To the point, the above is the default menu of Wangeditor-not too many, but certainly not enough to meet the requirements of all. For example, you may also need an "indent", a "select title", an "upload picture", an "insert Code", a "insert video/Voice", a "full screen" ... So much more--but after I take these features into account, is it over? --Of course not, the user's needs are unlimited.

But with two development and expansion, I can allow users to implement these functions on their own. From my current design, at least the above mentioned types are achievable. Let's start with the simplest "indent" function, and we'll go through it later, until all of these functions are implemented.

3. Extending a "indent" function 3.1 analysis type

Refer to "2." In the foreplay "", you can see all the menus that Wangeditor now offers. We can categorize these menus :

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;

Based on the above classification, it is found that indent belongs to the first type. This is what I call the "start from the simplest" reason, of course, the following two types of articles will be explained in later.

3.2 Borrowing the previous section of code

The previous section, "Lightweight Web Rich text box--wangeditor user Manual (1)--Basic Application" code, here to continue borrowing. Do not see a section of the friend, please first to make up the lessons. As follows:

3.3 First look at the code after the indentation

On the basis of the previous section of the code, let's take a look at what the code after the indentation is going to look like. Then we'll explain the code.

After adding the above code, run the webpage, we will see the Wangeditor menu bar added two custom buttons, and after the mouse is placed, there will be a title hint:

Let's now explain the meaning of these configuration items slowly.

3.4 menuId

In the newly inserted code, "indent" and "outdent" are the IDs of the two buttons, similar to the ID of the DOM node, which is the unique identification number of the button and cannot be duplicated. Repetition will lead to the latter covering the former. So pay special attention when you define it. The ID of the default menu button in Wangeditor is as follows, and when customizing the ID, be careful not to repeat it with these IDs.

People with programming experience know, take the name of the ID and the name of the variable, to use the meaning of the method, do not use "A1", "B2" Such name, time has not even you know.

3.5 Titile (title)

In each menu configuration, the title must be written! Here the title is casually to the name, anyway, is to write Chinese characters, the name of the button to write on the line.

Note that with the title, the button will display the title after the mouse is placed. (If you have shortcut keys, they will be displayed together, as described later)

3.6 Type (type)

In the "3.1 Analysis Types" section above, we analyzed the three types of wangeditor menu buttons and determined that the indent button belonged to the first type.

The first type we use "BTN" to express. The other two types are denoted by "dropmenu" and "modal", which are described later in this article.

3.7 txt (fontawesome style)

(In this reminder, do not know fontawesome friends can first go to see "please use Fontawesome instead of web icon small Icons", fontawesome this thing very good, also very simple, suggest you must go to use)

"Indent" as a button, what does it look like? We're not sure yet.

Everyone into the Http://www.thinkcmf.com/font/icons#text-editor page, you will see a good hundreds of icon small icons. All here, can get wangeditor to use, I chose "fa-indent" and "fa-outdent", I think most people will choose these two.

note , do not forget to add "FA" before the final form "FA fa-indent" or "FA fa-outdent" this format, otherwise it will not be realistic ah. In fact, the final generated code is <i class= "fa fa-indent" ></i>

3.8 HotKey (shortcut key)

Shortcut key function, but can not, look at their own needs. Currently, the default shortcut keys in Wangeditor are:

1. CTRL + B Bold
2. CTRL + I Italic
3. CTRL + U underline
4. CTRL + Z Undo

Here, I add a shortcut key "Ctrl,shift + i" to "Add Indent", and another "decrease indent" does not speed up the key.

Note that the shortcut key now supports a combination of four function keys--"Ctrl", "Shift", "alt", "meta"-plus one letter . So the following definitions are legal:

1. "Ctrl + Z"
2. "Ctrl,shift + i"
3. "Ctrl,shift,alt + A"
4. "Ctrl,shift,alt,meta + B"
5. "Meta,ctrl + t"
6. ...... (Just a few examples)

If a shortcut key is available, the shortcut key is combined with the title, which is displayed when the mouse is prevented on the button:

Finally, choose the shortcut key please be careful ! The browser itself has some shortcut keys, such as "CTRL + N" Do not use, in short, after joining the shortcut key, be sure to do a good test !

3.9 Command (document.execcommand name)

The most important knowledge of Web Rich Text editor is the Document.execcommand command. What the? You ever use Document.execcommand? --It's okay, don't worry.

I am here as an extended configuration of wangeditor, it is not possible to require each developer to be proficient in using Document.execcommand. You just need to know the command name of some basic operation (such as "indent") and write it to the specified location. As described in JavaScript Advanced Programming-Third Edition, the basic commands that are commonly used (the first type described in "3.1 analysis Types") are:

Note here:

• Listed here is only the basic command ("3.1 Analysis type" described in the first type), the other two types, the article does not involve, follow-up will be an article introduction;
• Picture frame of the current wangeditor have been realized, so left everyone's play room is not particularly much;

3.10 Callback (callback function)

The callback function is triggered by the system after executing a command on a button. Where this is the $editor in the callback function. (What is $editor? Go to the previous section of "3. Use the Rich text box, "Find the answer."

3.11 Incoming Custom Menus

We define our own menu (can be several, this article has "indent" and "outdent" two) unified as a parameter, passed into the Wangeditor () (note the outside of the two "{}"), Wangeditor will automatically append the two buttons, and implement their functions (including mouse clicks and shortcut keys).

4. Summary

This article used a lot of space to explain how to add two functions very simple "indentation" button, although only a simple 20+ code, but want to understand, it is not so easy. I feel like I've been telling you the details, but I don't know if the reader understands it.

The reason why this is so detailed is to clear the obstacles to the later article. So, to understand the content of the later article, we must first read this article to understand. Good luck, June!

5. Next Step

I wonder if anyone has found a problem.

• First, according to our daily usage habits, are these two buttons suitable for this place?
• Second, if each additional button is placed by default in the back, it is too impersonal!

One might say, isn't there a way to configure the menu in the first section? Can't you use that? --OK! is not good to use!

There's a better way to do it, let's introduce the next section. Later! In addition, the code used in this article can be viewed in the download folder "Demo_indent.html".

: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 (2)--Extend a "indent" function