Lightweight web rich text box -- wangEditor User Manual (6) -- configure the "Upload image" function,

Lightweight web rich text box -- wangEditor User Manual (6) -- configure the "Upload image" function,
1. Introduction

The previous section describes the "insert code" function in wangEditor and uses the pop-up box. The "Upload image" in this section also needs a pop-up box. How to configure the menu in the pop-up box has been discussed in the previous section. Here we will not repeat the description, but will only talk about the key content of the uploaded image.

In fact, the real function of uploading images is not my own, but I borrowed a powerful upload plug-in called uploadify, which many of my friends should know. Let's take a look at how to integrate uploadify, a powerful tool, into wangEditor.

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

Demo & all configuration instructions:Http://www.cnblogs.com/wangfupeng1988/p/4198428.html

Chat QQ group:164999061

2. Introduce uploadify & make a simple background service

The detailed application of uploadify is not the focus of this Article. There are various documents available for reference on the Internet. Example: http://www.cnblogs.com/fanyong/p/3736685.html

In addition, uploading images requires a background service to receive images. I used asp.net to provide a simple background service, and paste the source code into the. ashx file:

Data. ashx source code 3. Configure the "Upload image" button

As in the previous section, how to configure the menu button is clearly described in the previous article. I will not explain it one by one here, but I will only focus on it:

3.1 code structure

You should be familiar with the code structure. Pay attention to the 'modal' in the red box, which will be explained below.

3.2 'modal'

In the previous section "insert code", the role and rules of 'modal' have been described. Paste the 'modal' source code below and describe the following points.

'Modal' source code

1. Modal still requires a $ div;
2. Before returning $ div, configure uploadify for the input-file element;
3. In uploadify configuration, when the upload is successful (onUploadSuccess), run the commonCommand command. Note: This is not triggered by a javascript event. Therefore, if e is not used, null is input instead.

3.3 running webpage

Start the background service and run the webpage to see the effect:

4. Summary

Uploading images is a very important feature of the Rich Text Editor. It is a little too late to update images until now. No way, things have to go one step at a time.

All source code used in this section can be downloaded at http://pan.baidu.com/s/1qwsn0yg. then, you can use Visual Studio to open the website and run it.

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

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

Demo & all configuration instructions:Http://www.cnblogs.com/wangfupeng1988/p/4198428.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 -------------------------------------------------------------------------------------------------------------