Lightweight web rich text box -- wangEditor User Manual (2) -- extended a "indent" function, wangeditor User Manual

Lightweight web rich text box -- wangEditor User Manual (2) -- extended a "indent" function, wangeditor User Manual
1. Introduction

In the previous section "lightweight web rich text box -- wangEditor User Manual (1) -- Basic Application", we explained how to applyWangEditorCreate the most basic Rich Text Editor. This section describes how to expand a simple button. This section continues with the content of the previous section, and the code used is followed by the previous section. If you miss a friend, read the previous section first and then read this section.

:Https://github.com/wangfupeng1988/wangEditor

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..

Therefore, I think the software is not coded, but designed with the best effort. At work, I have the following experience:I never wanted everything you gave me to be perfect, but at least you have to support me to make it perfect, and it can be upgraded and updated smoothly..

The above is the default menu of wangEditor-Not many or many, but it certainly cannot meet the requirements of everyone. For example, you may also need an "indent", "select title", "Upload image", "insert code", and "insert video/voice ", A "full screen "...... A lot of things-but after I take these functions into consideration, will it be over? -- Of course not. The user needs are unlimited.

However, through secondary development and expansion, users can implement these functions on their own. From the perspective of my current design, at least the above mentioned types can be implemented. We will start with the simplest "indent" function step by step, and will introduce it later until all these functions are implemented.

3. Extended "indent" function 3.1 analysis Type

See the figure in [2. "foreplay"] to view all the menus provided by wangEditor. We can classify these menus:

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;

According to the above classification, we found that "indent" belongs to the first type. This is why I am talking about "starting from the simplest". Of course, the following two types will be explained in later articles.

3.2 borrow the previous Code

The code in the previous section "lightweight web rich text box -- wangEditor User Manual (1) -- Basic Application" will be used here. If you haven't read any of your friends in the previous section, please complete the course first. As follows:

3.3 first look at the code after adding indentation

Based on the code in the previous section, Let's first look at the code after adding indentation. Then compare the code to explain it one by one.

After the preceding code is added, run the webpage and we will see two custom buttons added to the menu bar of wangEditor. After the mouse is placed, a title prompt will be displayed:

Next, let's explain the meaning of these configuration items.

3.4 menuId

In the newly inserted code, "indent" and "outdent" are the IDs of these two buttons. Similar to the id of the dom node, they are the unique identifier of the button and cannot be repeated. Otherwise, the latter will overwrite the former. Pay special attention to the definition. The default menu button IDs in wangEditor are as follows. Do not repeat these IDs when creating custom IDS.

Anyone with programming experience knows that getting the id name is the same as getting the variable name. You must use the word meanings instead of names like "a1" and "b2, after a long time, you may not even know yourself.

3.5 titile (title)

In each menu configuration, the title is required! The title here is just a name. It is a Chinese character. Just write the name of this button.

Note that with the title, the title will be displayed after the button is placed with the mouse. (If there is a shortcut key, it will also be displayed together, which will be discussed later)

3.6 type)

In [3.1 analysis type] above, we analyzed the three types of wangEditor menu buttons and determined that the "indent" button belongs to the first type.

The first type is represented by "btn. The other two types are represented by "dropMenu" and "modal", which will be described in later articles.

3.7 txt (fontAwesome style)

(I would like to remind you that if you are not familiar with fontAwesome, you can check "Please use fontAwesome to replace the icon on the webpage" first. fontAwesome is very good and very easy. We suggest you use it)

"Indent" is a button. What does it look like? We are not sure yet.

Visit http://www.thinkcmf.com/font/icons?text-editor, and you will see several hundred iconicons. All of them can be used in wangEditor. I have selected "fa-indent" and "fa-outdent". I think most people will choose either of them.

Note: Do not forget to add "fa" to the front and form "fa-indent" or "fa-outdent". Otherwise, it will be unrealistic. In fact, the final generated code is <I class = "fa-indent"> </I>

3.8 hotKey (shortcut key)

Shortcut key function, whether or not, depends on your needs. Currently, wangEditor has the following default shortcut keys:

1. Ctrl + B bold
2. Ctrl + I Italic
3. Ctrl + u underline
4. Ctrl + z undo

Here, I added a shortcut key "ctrl, shift + I" to "increase indent", and another "decrease indent" without a shortcut key.

Note: The shortcut keys now support a combination of four function keys-ctrl, shift, alt, and meta-plus a letter.. Therefore, the following definitions are valid:

1. "Ctrl + z"
2. "Ctrl, shift + I"
3. "Ctrl, shift, alt +"
4. "Ctrl, shift, alt, meta + B"
5. "Meta, ctrl + t"
6. ...... (Just a different example)

If there is a shortcut key, the shortcut key will work together with the title, when the mouse prevents display on the button:

Finally, please be careful when selecting the shortcut key! There are some shortcut keys in the browser. For example, "ctrl + n" should not be used. In short, after adding the shortcut key, be sure to test it!

3.9 command(document.exe cCommand command name)

The document.exe cCommand command is the most important part of the webrich editor. What? Have you used document.exe cCommand? -- It doesn't matter. Don't worry.

This is an extension configuration of wangeditor. developers cannot use document.exe cCommand. You only need to know the command name of some basic operations (such as "indent") and write it to the specified location. According to the introduction in "javascript advanced programming-the third edition ",Basic commands(The first type described in [3.1 analysis type:

Note:

• OnlyBasic commands(The first type described in [3.1 analysis type]). The other two types are not involved in this article and will be introduced later;
• Currently, wangEditor has been implemented for the frames in the figure, so there is not much room for everyone to play;

3.10 callback (callback function)

The callback function is triggered by the system after a button command is executed. In the callback function, this is $ editor. (What is $ editor? Go to [3. Use Rich Text Box] in the previous section to find the answer)

3.11 import custom menu

We define a number of menus (either "indent" or "outdent") as parameters and pass them to wangEditor () (pay attention to the two "{}" OUTSIDE), wangEditor will automatically append the two buttons and implement their functions (including mouse clicks and shortcut keys ).

4. Summary

This article uses a lot of space to explain how to add two simple "indent" buttons. Although there are only 20 + code, it is not that easy to describe it. I feel that I have already explained it in detail, but I don't know whether the readers understand it.

The reason why this is so detailed is to clear the obstacles for subsequent articles. Therefore, to understand the content of the subsequent article, you must first understand this article. Good luck!

5. Next Step

I wonder if you have found a problem.

• First, according to our daily usage habits, are these two buttons suitable here?
• Second, if every button added is put behind by default, it will be too unfriendly!

 

Some people may say: isn't the menu configuration method already mentioned in section 1? Can't I use that? -- Line! Is not easy to use!

There is a better way to use it. Let's introduce it in the next section. Go back! In addition, you can view the code used in this document in includemo_indent.html In the downloaded folder.

: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 -------------------------------------------------------------------------------------------------------------