Lightweight Web Rich text box--wangeditor user's Manual (6)--Configure the "Upload image" function

1. Introduction

The previous section explains the "Insert Code" feature in Wangeditor, which uses a popup box. The "Upload picture" In this section also has a popup box. How the Pop-up menu is configured, as described in the previous section, will not be repeated here, only the focus of the uploaded image.

In fact, the real upload image function, not I do, but borrowed a very powerful upload plugin--uploadify--Many friends should know this thing. So let's take a look at how to integrate uploadify, a powerful tool, into the wangeditor.

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

Demo Demo & All configuration instructions:http://www.cnblogs.com/wangfupeng1988/p/4198428.html

Chat QQ Group:164999061

2. Introduction Uploadify & do a simple back-office service

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

In addition, upload pictures definitely need a background service to receive pictures, I use ASP. NET to do a simple background service, just a. ashx document, paste the source code to everyone:

1<%@ WebHandler language="C #"class="Data"%>2 3 usingSystem;4 usingsystem.web;5 usingSystem.IO;6 7  Public classData:ihttphandler {8     9      Public voidProcessRequest (HttpContext context) {TenContext. Response.ContentType ="Text/plain"; OneContext. Response.Charset ="Utf-8"; A  -Httppostedfile file = context. request.files["Filedata"]; -         stringUploadpath = context. Request.mappath ("/uploadedfiles/");//There is a uploadedfiles folder in the website that stores the pictures that came from the  -         stringFileName =file. FileName; -         stringImgurl ="/ http"+ context. Request.Url.Authority +"/uploadedfiles/"+FileName; -  +         if(File! =NULL) -         { +             if(Directory.Exists (uploadpath) = =false) A             { at directory.createdirectory (uploadpath); -             } -File. SaveAs (Uploadpath +fileName); - context. Response.Write (Imgurl); -         } -         Else in         { -Context. Response.Write ("0");  to         } +     } -   the      Public BOOLisreusable { *         Get { $             return false;Panax Notoginseng         } -     } the  +}

Data.ashx Source3. Configure the "Upload Picture" button

As in the previous section, how to configure the menu button, the previous article has been described very clearly, here is no longer one by one explanation, just say the focus:

3.1 Code structure

See the code structure, you should be very familiar with. Note the ' modal ' of the red box, which will be explained below.

3.2 ' Modal '

The previous section, "Inserting code," has already explained the functions and rules of ' modal '. Here to paste the ' modal ' source code below, and then explain a few points.

1' Modal ': (function () {2                         varFileId =Wangeditor_getuniqeid (),3$modal = $(4' <div> ' +5' <input type= ' file "id=" ' + fileId + ' "/> ' +6' </div> '7                             );8 9                         //The following is to get the input-file element through jquery, so it must be rendered to the DOM tree before it gets input-fileTen$ (' body '). Append ($modal); One  A                         //Configure Uploadify -$ (' # ' +fileId). uploadify ({ -Height:30, thewidth:120, -SWF: ' uploadify/uploadify.swf ', -Uploader: ' Data.ashx ', -ButtonText: ' Select Picture ', +Multifalse, -Filetypeexts: ' *.jpg; *.jpeg; *.gif; *.png ', +Onuploadsuccess:function(file, data, response) { A                                 //Wangeditor_commoncommand (E, CommandName, Commandvalue, callback); atWangeditor_commoncommand (NULL, ' Insertimage ', data); -$ ('. Uploadify-queue '). Hide ();//force the progress bar to disappear -                             } -                         }); -  -                         return$modal; in})()

' modal ' source code

1. Modal need is still a $div;
2. Before returning to the $div, the Input-file element in the uploadify configuration;
3. In the uploadify configuration, when the upload succeeds (onuploadsuccess), the Commoncommand command is executed. Note that this is not triggered by JavaScript events, so there is no e, and null is passed in instead.

3.3 Running the Web page

Start the background service, run the Web page, you can see the effect:

4. Summary

Uploading a picture is a very important feature of the rich text editor, until now it's been updated, a little belated. No way, things have to go step by step.

All the source code in this http://pan.baidu.com/s/1qWsN0Yg can be downloaded in the download, then open the website with Visual Studio and run.

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

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

Demo Demo & All configuration instructions:http://www.cnblogs.com/wangfupeng1988/p/4198428.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 (6)--Configure the "Upload Picture" feature