The Rich Text File CKEDITOR adds the image upload function (. net) and ckeditor uploads images.

The Rich Text File CKEDITOR adds the image upload function (. net) and ckeditor uploads images.

For example, the CKEDITOR control does not enable the image upload function,

Open the image button, only the image information and the Advanced table tabs, the version is different, the display is slightly different, my implementation is there are two ways to add the upload function,

Method 1 use the CKEDITOR code Function

There are a lot of birds in the "preview" and they are very uncomfortable. You can use 1 or 2 to clear the logs.

1: You can open ckeditor/plugins/image/dialogs/image. search for "B. config. image_previewText "to find the bird's sentence (B. config. image_previewText | '') All content in single quotes is deleted. Do not delete more.

2: Open the ckeditor/config. js file and add

Config. image_previewText = ''; // clear the content displayed in the preview area.

 

Open the ckeditor/plugins/image/dialogs/image. js file and search "upload" to find this section.

 

Id: 'upload', hidden: true

 

In fact, the upload function is hidden. Change true to false. If your display is den :! 0. You can directly change it to 0 to display it, and then open the editor to find the upload function.

Set the event URL of the upload button to the server, and specify the URL to which the uploaded file is submitted for processing,

Open the ckeditor/config. js file and add

 

Config. filebrowserImageUploadUrl = ".. /UploadweixinImgHandler. ashx "; // set the URL for processing the submitted upload image button. Here, I set the submit button to a general processing program. This is what I want to create myself. I created it to the root directory, so there will be .. /. Now, write UploadweixinImgHandler. the code in the ashx file is as follows:

Public void ProcessRequest (HttpContext context)
{
String callback = context. Request. QueryString ["CKEditorFuncNum"]. ToString ();
/// 'Traverse the File form Element
HttpFileCollection files = HttpContext. Current. Request. Files;
For (int iFile = 0; iFile <files. Count; iFile ++)
{
//// 'Check the extension name of the file
HttpPostedFile postedFile = files [iFile];
// HttpPostedFile postedFile = files [0];
String fileName; //, fileExtension
FileName = System. IO. Path. GetFileName (postedFile. FileName );


String fileContentType = postedFile. ContentType. ToString ();
If (fileContentType = "image/bmp" | fileContentType = "image/gif" |
FileContentType = "image/png" | fileContentType = "image/x-png" | fileContentType = "image/jpeg"
| FileContentType = "image/pjpeg ")
{
If (postedFile. ContentLength <= 2097152)
{
String filepath = postedFile. FileName; // obtain the complete file path, including the file name, for example, C: \ Documents ents and Settings \ Administrator \ My Documents ents \ My Pictures \ 20022775_m.jpg.
// String filepath = FileUpload1.FileName; // the uploaded file name is 20022775_m.jpg.

String serverpath = context. Server. MapPath ("~ /WeiXinImg/") + fileName; // obtain the file storage location on the server C: \ Inetpub \ wwwroot \ WebSite1 \ images \ 20022775_m.jpg

PostedFile. SaveAs (serverpath); // upload the image to the specified address on the server

String imageurl = "http: // localhost: 8665/WeiXinImg/" + fileName; // I used the local address during the test, the folder where the image is placed, and the image name as the returned URL.

// Return to the "image" tab and display the image
Context. Response. Write ("<script type = \" text/javascript \ "> ");
Context. Response. Write ("window. parent. CKEDITOR. tools. callFunction (" + callback
+ ", '" + Imageurl + "','')");
Context. Response. Write ("</script> ");
}
Else
{
Context. Response. Write ("<script> alert ('upload file cannot be larger than 2 MB! ') </Script> ");
}
}
Else
{
Context. Response. Write ("<script> alert ('only images in BMP, GIF, JPG, and PNG formats are supported! ') </Script> ");
}
}
}

 

Now, the upload function of CKEDITOR is used, and a general processing program is added to complete the upload function.

Method 2: If you already have your own upload template (I am referring to a separate upload webpage ),

 

Open the ckeditor/plugins/image/dialogs/image. js file and search "urlMissing" to find this section. Add the following code after:

{Type: 'call', id: 'myupload', style: "margin-top: 14px;", align: 'center', label: 'local upload', onClick: function () {var retFile = showModalDialog (".. /UpLoadWeixinImg. aspx "," "," dialogHeight: 380; dialogWidth: 600; "); if (retFile! = Null) {this. getDialog (). setValueOf ('info', 'txturl', retFile );}}},

ShowModalDialog (".. /UpLoadWeixinImg. aspx ", specifying the URL-to-URL link address and the upload template. The showModalDialog method can run normally in IE and Firefox, and may be incompatible in Google's browser. I cannot try it anyway, I heard that window is used. open can be replaced. I didn't try it. You can try it,

The running interface is as follows:

Next let's take a look at the UpLoadWeixinImg. aspx upload page template Code as follows:

/// <Summary>
/// Upload an image
/// </Summary>
/// <Param name = "sender"> </param>
/// <Param name = "e"> </param>
Protected void LinkBtnFileUploadImg_Click (object sender, EventArgs e)
{
If (this. FileUploadImg. HasFile)
{
String fileContentType = FileUploadImg. PostedFile. ContentType;
If (fileContentType = "image/bmp" | fileContentType = "image/gif" |
FileContentType = "image/png" | fileContentType = "image/x-png" | fileContentType = "image/jpeg"
| FileContentType = "image/pjpeg ")
{
Int fileSize = this. FileUploadImg. PostedFile. ContentLength;

If (fileSize <= 2097152)
{
String fileName = this. FileUploadImg. PostedFile. FileName; // client file path

String imageurl = "http: // localhost: 8665/WeiXinImg/" + fileName;

String filepath = FileUploadImg. PostedFile. FileName; // obtain the complete file path, including the file name, such as C: \ Documents ents and Settings \ Administrator \ My Documents ents \ My Pictures \ 20022775_m.jpg.
// String filepath = FileUpload1.FileName; // the uploaded file name is 20022775_m.jpg.
String filename = filepath. Substring (filepath. LastIndexOf ("\") + 1); // 20022775_m.jpg
String serverpath = Server. MapPath ("~ /WeiXinImg/") + filename; // obtain the file storage location on the server C: \ Inetpub \ wwwroot \ WebSite1 \ images \ 20022775_m.jpg
This. FileUploadImg. PostedFile. SaveAs (serverpath); // Save the uploaded file

// Here I call the js script of the foreground Client
ClientScript. RegisterStartupScript (this. GetType (), "SayHello", "<script> SayHello ('" + imageurl + "') </script> ");
}
Else
{
Response. Write ("<script> alert ('upload file cannot be larger than 2 MB! ') </Script> ");
}

}
Else
{
Response. Write ("<script> alert ('only images in BMP, GIF, JPG, and PNG formats are supported! ') </Script> ");
}
}
Else
{
Response. Write ("<script> alert ('select an image! ') </Script> ");
}
}

 

The SayHello script is as follows:

<Script type = "text/javascript">
Function SayHello (imgPath ){
Window. returnValue = imgPath; // The uploaded image link.
Window. close ();
}
</Script>

 

The final implementation is as follows:

 

The two methods are implemented in the same way. You can select which one is useful as needed. If redundant code exists in the above Code, delete it on your own, I also tested the code in one line on the Internet.