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，将彈出層隐藏。