Uploading pictures using the Umeditor Rich Text editor

Note: This article is author original, but can be reproduced freely.

Recently write their own website play, write to the part of the blog, intends to use umeditor, because it has been used before (but it seems not to achieve the function of uploading images), feeling used is relatively simple.

But it's been a whole afternoon. Faced with a lot of problems, the most troublesome thing is that the document and the actual code is not unified, resulting in a greatly reduced credibility of the document, can only rely on their own step-to-step tracking debugging.

For example, the config file for JS in the document gives two nodes

{    "Imagepathformat":"Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"," Imageurlprefix ":"/myapp/ueditor/net/",}

But the actual download down the Umeditor code of the JS config file gives the node is,

Image upload Configuration Area

, imageurl:url+ "net/imageup.ashx"//image upload submission Address
, Imagepath:url + "net/"//image correction address, reference to Fixedimagepath, if there are special needs, can be self-configuring
, Imagefieldname: "Upfile"//image Data key, if modified here, you need to modify the corresponding parameters in the background file

Question One,

After downloading, direct reference to Umeditor, directory structure, for example, in the ASP. NET MVC4 project, put the entire Umeditor folder under scripts. Edit the blog page has been written, start the program, go to the edit page click Upload Image, upload, error.

Description: An error occurred during compilation of the resource required to provide service to the request. Please check the following specific error details and modify the source code as appropriate.

Compiler Error Message: CS0433: Type "Lyosaki.Site.Uploader" exists simultaneously in "C:\Users\LiuYu\AppData\Local\Temp\Temporary ASP. files\root\0d2fa058\ 84067035\app_web_uploader.cs.c95a9a5.dyxu9rbj.dll "and" C:\Users\LiuYu\AppData\Local\Temp\Temporary ASP. Files\ Root\0d2fa058\84067035\assembly\dl3\3147e142\84a16ccb_7a2ad101\lyosaki.site.dll "in

Solution: Because there is a sentence <%@ Assembly src= "Uploader.cs" in the header of the Imageup.ashx file, a relative path is given, and the system finds multiple assemblies in the default path causing the compilation to fail. Here directly to remove this sentence, the other Uploader.cs no namespace, here with the namespace Lyosaki.site, and then directly inside the imageup.ashx using Lyosaki.site;

Question Two,

Without changing the existing directory structure and the default image upload path, the image upload address shape: ~/scripts/umeditor/net/upload/yyyy-mm-dd/guid.jpg.

So, I want to optimize the file organization structure, change the image storage location to ~/upload/yyyy-mm-dd/guid.jpg. By the way Ashx and CS files out, placed in the Scripts folder is really twisted.

Debugging here for half a day, because the picture upload path splicing logic is really chaotic, in C # Two files have configuration, JS also has related configuration, and then C # upload after the callback JS and sent a path back ...

Solution: Create a new ashx folder under the root directory and copy the two ashx files. Create a new helper folder in the root directory and copy the Uploader.cs in.

In the Imageup file ProcessRequest method, modify the Pathbase to

Upload Configuration
String pathbase = "/upload/";.

Represents the Upload folder to upload the file to the root directory, but cannot be written as "~/upload", because the path behind it will be recalled to Js,js cannot parse ~.

In the Umeditor.config.js file, modify the image upload configuration to:

Image upload Configuration Area
, ImageUrl: "/ashx/imageup.ashx"//image upload submission Address
, ImagePath: ""//image correction address, reference to Fixedimagepath, if special needs, can be configured by themselves
, Imagefieldname: "Upfile"//image Data key, if modified here, you need to modify the corresponding parameters in the background file

Question three,

Click on the image upload, pop-up window, because the page is longer, you can scroll up and down, but at this time, the entire "picture" pop-up window is fixed, will scroll with the page ... But "local upload", "Network Pictures" of the two pannel, and the middle of the small computer pictures and the following line of text, is really relative, scroll to the bottom, they will not follow the scroll ...

Cause a few times I scroll to the bottom and then point the image upload, but do not see the middle of the content, but also thought that the network problem did not load out ...

Solution:

Add the following lines of style to the umeditor.css.

. edui-tab-pane {
Position:fixed!important;
}

. Edui-image-dragtip,. edui-image-upload1 {
left:50%!important;
Position:fixed!important;
}

There are no other problems at the moment, but it is intended to reuse its upload pop-up window and back-office logic elsewhere, first to study whether the research can be achieved.

Uploading pictures using the Umeditor Rich Text editor