CKeditor adds the image upload function

CKeditor can be used with CKfinder to upload and manage files. However, image uploading usually requires some custom operations, such as writing the image path to the database tutorial and adding watermarks to the image.

Implementation principle: configure the CKeditor custom icon, click a subwindow to pop up, upload images in the subwindow to implement our own functions, then, the child window is automatically closed and the image is inserted to the current cursor position of CKeditor.

Steps:

1. Configure CKeditor. You can check a lot of information on the Internet.

2. Configure the config. js file. This is the configuration file of CKeditor. Configure the icon to be displayed.

CKEDITOR. editorConfig = function (config)
2 {
3 // Define changes to default configuration here. For example:
4 config. language = 'zh-cn ';
5 config. skin = 'V2 ';
6 // config. uiColor = '# AADC6E ';
7 config. toolbar =
8 [
9 ['source', '-', 'preview', '-'],
10 ['cut ', 'copy', 'paste', 'pastetext ', 'pastefromword'],
11 ['Undo ', 'redo', '-', 'Find ', 'replace', '-', 'selectall', 'removeformat'],
12 '/',
13 ['bold ', 'italic', 'underline'],
14 ['numberlist', 'bulletedlist', '-', 'outdent ', 'indent'],
15 ['justifyleft', 'justifycenter', 'justifyright', 'justifyblock'],
16 ['link', 'unlink', 'Anchor '],
17 ['addpic ', 'flash', 'table', 'horizontalrule', 'smiley', 'specialchar ', 'pagebreak'], // The addpic here is our custom icon, which is not provided by CKeditor.
18 '/',
19 ['Styles ', 'format', 'font', 'fontsize'],
20 ['textcolor', 'bgcolor'],
21
22];
23
24 config. extraPlugins = 'addpic ';
25
26 };
3. Create an addpic folder under the CKeditorplugins folder, and add the addpic. JPG icon file under the folder. The recommended size is 14*13. The addpic. JPG icon file is the addpic icon displayed on CKeditor. Add the file plugin. js in the same directory as the icon file. The content is as follows.

 

1 (function (){
2 // Section 1: code executed when the custom button is pressed
3 var a = {
4 exec: function (editor ){
5 show ();
6}
7 },
8 B = 'addpic ';
9 CKEDITOR. plugins. add (B ,{
10 init: function (editor ){
11 editor. addCommand (B, );
12 editor. ui. addButton ('addpic ',{
13 label: 'Add image ',
14 icon: this. path + 'addpic. JPG ',
15 command: B
16 });
17}
18 });
19 })();

The show function in the file is used to display subpages. I will write it on the page where CKeditor is located.

4. js used in edit. asp tutorial x page

The edit. aspx page is the page that uses CKeditor.

 

Function show (){

$ ("# Ele6") [0]. click ();
}
Function upimg (str ){
If (str = "undefined" | str = ""){
Return;
    }
Str = " ";
CKEDITOR. instances. TB_Content.insertHtml (str );
Close ();
}
Function close (){
$ ("# Close6") [0]. click ();
}
$ (Document). ready (function (){
New PopupLayer ({trigger: "# ele6", popupBlk: "# blk6", closeBtn: "# close6", useOverlay: true, offsets: {x: 50, y: 0 }});
});
The above is the js code. In the pop-up window, the jquery pop-up layer is used. In the pop-up layer, iframe is nested and upimg is used in iframe. if you have other requirements, you can design the pop-up results on your own. For the convenience of debugging, I will paste the code for implementing the pop-up layer.

The pop-up layer uses the popup_layer.js solution. If you need further processing, you can Google it on Baidu. Ele6 is the layer required for the pop-up, blk6 is the main body of the pop-up layer, and close6 is the layer that carries the close button in the layer. The code is as follows:

 

<Div id = "ele6" style = "cursor: hand; color: blue; display: none;"> </div>
<Div id = "blk6" class = "blk" style = "display: none;">
<Div class = "head"> <div class = "head-right"> </div>
<Div class = "main">
<A href = "webpage effect: void (0)" id = "close6" class = "closeBtn"> </a>
<Iframe src = "upimg. aspx"> </iframe>
</Div>
</Div>
Don't forget to reference jquery and popup_layer.js.

 

5. upimg. aspx page

Aspx code

 

<Div>
<Asp: FileUpload ID = "FU_indexIMG" runat = "server"/>
<Br/>
<Asp: Button ID = "Button1" runat = "server" Text = "upload" onclick = "button#click"/>
<Asp: Button ID = "Button2" runat = "server" onclick = "Button2_Click" Text = "cancel"/>
</Div>
Corresponding cs code

 

1 protected void button#click (object sender, EventArgs e)
2 {
3 string imgdir = UpImg ();
4 script = "window. parent. upimg ('" + imgdir + "');";
5 ResponseScript (script );
6}
7 protected void Button2_Click (object sender, EventArgs e)
8 {
9 string script = "window. parent. close ();";
10 ResponseScript (script );
11}
12 /// <summary>
13 // output the script
14 /// </summary>
15 public void ResponseScript (string script)
16 {
17 System. Text. StringBuilder sb = new System. Text. StringBuilder ("<script language = 'javascript 'type = 'text/javascript '> ");
18 sb. Append (script );
19 sb. Append ("</script> ");
20 ClientScript. RegisterStartupScript (this. GetType (), RandomString (1), sb. ToString ());
21}
22 /// <summary>
23 // Obtain the random number
24 /// </summary>
25 /// <param name = "count"> length </param>
26 /// <returns> </returns>
27 public static string RandomString (int count)
28 {
29 RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider ();
30 byte [] data = new byte [count];
31 rng. GetBytes (data );
32 return BitConverter. ToString (data). Replace ("-","");
33}

Button#click is the click event function of the OK button. You can use the UpImg function to upload image files. I have also added watermarks, reduced images, and saved the image file size and relative paths to a database. The returned value of UpImg is the relative path for saving the image, and then the js function upimg of The editer. aspx page is called. The js function upimg inserts a string into the current position of the CKeditor cursor and inserts html code. So far, the img tag with the relative path of the newly uploaded image is inserted into the CKeditor editing area to display the image.

Button#click is the click event function of the cancel button. Call the js function close on the editer. aspx page to hide the pop-up layer.