CKeditor自定义上传图片功能

CKeditor可以配合CKfinder实现文件的上传及管理。但是往往我们上传的图片需要某些自定义的操作，比如将图片路径写入数据库，图片加水印等等操作。

实现原理：配置CKeditor的自定义图标，单击弹出一个子窗口，在在子窗口中上传图片实现我们的自己的功能，然后自动关闭子窗口将图片插入到CKeditor的当前光标位置。

实现步骤：

1、配置CKeditor。网上很多资料，大家自己查。

2、配置config.js文件。此文件为CKeditor的配置文件。配置需要显示的图标。

 1 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         ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
15         ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
16         ['Link', 'Unlink', 'Anchor'],
17         ['addpic','Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],//此处的addpic为我们自定义的图标，非CKeditor提供。
18         '/',
19         ['Styles', 'Format', 'Font', 'FontSize'],
20         ['TextColor', 'BGColor'],
21        
22     ];
23 
24     config.extraPlugins = 'addpic';
25 
26 };

 3、在CKeditor\plugins文件夹下新建addpic文件夹，文件夹下添加addpic.JPG图标文件，建议尺寸14*13。addpic.JPG图标文件即为显示在CKeditor上的addpic的图标。在图标文件同目录下添加文件plugin.js，内容如下。

 1 (function () {
 2     //Section 1 : 按下自定义按钮时执行的代码
 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, a);
12             editor.ui.addButton('addpic', {
13                 label: '添加图片',
14                 icon: this.path + 'addpic.JPG',
15                 command: b
16             });
17         }
18     });
19 })();

 文件中的show函数为显示子页面使用，我将它写在CKeditor所在的页面中。

4、edit.aspx页面使用的js

edit.aspx页面就是使用CKeditor的页面。

function show() {

    $("#ele6")[0].click();
}
function upimg(str) {
    if (str == "undefined" || str == "") {
        return;
    }
    str = "<img src='/html/images/" + str+"'</img>";
    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} });
});    

 以上就是js的代码，弹出窗口是使用jquery的弹出层，弹出层中嵌套iframe，iframe中使用upimg.aspx上传页面，大家如果有其他需要可以自己去设计弹出效果。为了大家调试方便，我将我实现弹出层的代码贴出来。

弹出层效果使用的是popup_layer.js方案，需要进一步加工的朋友可以自己在百度中谷歌。ele6为弹出激发需要的层，blk6为弹出层主体，close6为层中承载关闭按钮的层。代码如下

<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>
        <div class="main">                
            <a href="javascript:void(0)"  id="close6" class="closeBtn"></a>                
            <iframe src="upimg.aspx"></iframe>                    
        </div>            
    </div>

别忘记引用jquery和popup_layer.js。

5、upimg.aspx页面

aspx代码

<div>
        <asp:FileUpload ID="FU_indexIMG" runat="server" />
        <br />
    <asp:Button ID="Button1" runat="server" Text="上传" onclick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="取消" />
        </div>

对应的cs代码

 1 protected void Button1_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     /// 输出脚本
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     /// 获得随机数
24     /// </summary>
25     /// <param name="count">长度</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     }

Button1_Click为确定按钮的单击事件函数。其中使用UpImg函数实现上传图片文件，我还在其中实现了加水印，缩图，将图片文件的大小以及相对路径存入数据库等自定义操作，大家可以在此发挥。UpImg返回值为保存图片的相对路径，然后调用editer.aspx页面的js函数upimg。js函数upimg功能为将字符串插入到CKeditor的当前光标位置，插入的是html代码。至此为止带有新上传图片相对路径的img标签就插入CKeditor的编辑区了，能够显示图片了。

Button1_Click为取消按钮的单击事件函数。调用editer.aspx页面的js函数close，将弹出层隐藏。