CKeditor增加上傳圖片功能方法

CKeditor可以配合CKfinder實現檔案的上傳及管理。但是往往我們上傳的圖片需要某些自訂的操作，比如將圖片路徑寫入資料庫教程，圖片加浮水印等等操作。

實現原理：配置CKeditor的自訂表徵圖，單擊彈出一個子視窗，在在子視窗中上傳圖片實現我們的自己的功能，然後自動關閉子視窗將圖片插入到CKeditor的當前游標位置。

實現步驟：

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

2、配置config.js檔案。此檔案為CKeditor的設定檔。配置需要顯示的表徵圖。

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、在CKeditorplugins檔案夾下建立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.asp教程x頁面使用的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方案，需要進一步加工的朋友可以自己在百度中Google。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="網頁特效: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，將彈出層隱藏