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，將彈出層隱藏。
轉載于:https://www.cnblogs.com/lts8989/archive/2011/08/04/2127326.html
總結
以上是生活随笔為你收集整理的CKeditor自定义上传图片功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 进入社会，我们要做哪些准备？
- 下一篇： Microsoft.Net框架程序设计学