Lightweight Web Rich text box--wangeditor user's Manual (1)--Basic application

1. Introduction & Download

Wangeditor is a lightweight web Rich Text editor written in JavaScript that relies on jquery and fontawesome font libraries to support all browsers . With wangeditor , you can easily create Web Rich text boxes and customize the Extended menu functionality. Wangeditor all source code has been downloaded on GitHub.

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

Chat QQ Group:164999061

2. Generate Rich text box 2.1 download

Download the source code from Https://github.com/wangfupeng1988/wangEditor, the folder structure is as follows: (not in the file can be ignored)

Note above:

• The red line of the two files are not compressed CSS and JS, downloaded after it can be deleted, using a compressed version of the file.
• The current version is 1.1.0, and the description is in accordance with this version. If the version is updated later, the and instructions here are not necessarily updated in time and can be used in the latest. The method of use is the same.

2.2 Creating a new HTML document

Creating a new HTML document is simple, needless to say:

2.3 References to jquery and Fontawesome

Refer to jquery and fontawesome in the new HTML document that you just created. If your page has already applied these, that's better, you can omit this step. Note here that when applying fontawesome, you should also refer to files that are compatible with IE7.

(in addition, do not know fontawesome friends, you can see "please use Fontawesome instead of web icon small Icons", very simple, very practical)

Note here that the application of JavaScript files is best placed at the bottom of the body.

2.4 References to WANGEDITOR.MIN.CSS and WangEditor.min.js

On the basis of the above, in reference to the Wangeditor required CSS and JS files, very simple, directly look:

Note here that the first reference to jquery, then the wangEditor.min.js, note the order.

2.5 Creating a div

The references are all quoted, and the next step is to create them ourselves. The first step is to create a div, which is very simple.

Note here:

• Div to set an ID to facilitate the next step through jquery to get it;
• Div to set a default height, otherwise wangeditor will give you a default height (or you set the good);
• Div better give a border border style, otherwise out of the editor will have no border;
• the content of Div, can be any HTML code, that is, you want to initialize in the Rich text box display content ;

Both the height and border styles are placed externally, allowing the user to handle them freely.

2.6 Generating Rich text boxes

The previous step creates a div, which we'll use to generate a rich text box, and it's simple.

In one word, you can create a rich text box with a Div. When you run the program, you can see the effect:

is the effect the same as you expected? It took you a few minutes to create this page? Is it simple?

One might wonder : Why create a "var $editor" and "$editor" what exactly is a thing? --don't worry, there's a description below.

3. Use Rich text boxes

Just raised a question, the following answer.

What's the "$editor" here? --in fact, after executing this code, the returned object is assigned a value of "$editor", and a jquery object is returned. That is , the "$editor" is a jquery object, a $ (' #div '). In the following example, we can understand:

See, the requirements are not high-you can easily handle wangeditor! if you use jquery.

4. Customizing the menu Configuration

Wangeditor supports the configuration of multiple menus, including:

• Mandatory customization;
• Custom hide some menus;
• Insert several menus in front of the known menu;
• Append several menus to a known menu;

Above these four kinds, this article can only speak the first two kinds. Because the last two need to add a menu, and now we have not started to add new menus, so we do not speak first.

4.1 Enforcing customizations

To give an extreme example: I'm now going to make the simplest rich text box, just need a "bold" and "underline" the two features, the others do not, and these two to use "|" Separated.

The effect is obvious, right?

In fact, this is passed in an array (do not forget the "{}" on both sides), the default menu in Wangeditor has been configured to overwrite. The default configuration in Wangeditor is as follows:

If you do not wear any of the mandatory custom menu configurations, Wangeditor will follow this configuration by default. If you want to customize the configuration yourself, then customize it as long as the rules are met.

4.2 Custom Hide

With the mandatory customization described above, custom hiding is a good idea, and nothing more than passing in an array of what to hide.

For example, now you want to hide the font and font size:

5. Summary

This article describes the simplest and most basic application of wangeditor. The code that is used in this article can be viewed in the download folder "Demo_basic.html".

Next article I'll show you how to extend the simplest button for wangeditor, so look forward to it!

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

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 (1)--Basic application