.net中使用ckeditor4+ckfinder上传图片
? ? ? ? 因設計一個線上考試系統，需要考生上傳相關設計的圖片，因此在網上查找了使用ckeditor+ckfinder技術上傳圖片的文章，網上相關文章很多，但大多都不能完全成功，通過不斷的參考和大量的調試，總算成功地實現了圖片的上傳功能。
一、官方Download
1、CKEditor?：選擇”Full?Package”，單擊“Download“按鈕,下載文件：ckeditor_4.17.1_full.zip
2、CKFinder?：點擊Asp.net標簽下的“Download?zip?packape”按鈕,下載文件：ckfinder_aspnet_2.6.3.zip
二、具體部署
1、分別解壓下載下來的這2個文件，并把解壓后的子目錄ckeditor和ckfinder文件夾拷貝到你的項目中；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1
2、CKEditor配置的修改
（1）設置CKEditor的工具欄
在win中雙擊ckeditor\samples\index.html:
????????????????????????????????????????????????????圖2
單擊右上部的“TOOLBAR?CONFIGURATOR”按鈕，出現工具欄按鈕選擇界面：
????????????????????????????????????????????????圖3
配置完成，單擊“Get?toolbar?config”按鈕，并將其中的配置代碼拷貝到ckeditor\config.js文件中。
????????????????????????????????????????????????圖4
將下面的代碼添加到ckeditor\config.js的配置文件中
CKEDITOR.editorConfig = function( config ) {
?? ?// Define changes to default configuration here. For example:
?? ?// config.language = 'fr';
? // config.uiColor = '#AADC6E';
? ? config.toolbarGroups = [
?? ??? ?{ name: 'document', groups: ['mode', 'document', 'doctools'] },
?? ??? ?{ name: 'clipboard', groups: ['clipboard', 'undo'] },
?? ??? ?{ name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },
?? ??? ?{ name: 'forms', groups: ['forms'] },
?? ??? ?{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
?? ??? ?{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] },
?? ??? ?{ name: 'links', groups: ['links'] },
?? ??? ?{ name: 'insert', groups: ['insert'] },
?? ??? ?{ name: 'styles', groups: ['styles'] },
?? ??? ?{ name: 'colors', groups: ['colors'] },
?? ??? ?{ name: 'tools', groups: ['tools'] },
?? ??? ?{ name: 'others', groups: ['others'] },
?? ??? ?{ name: 'about', groups: ['about'] }
?? ?];
? ? config.removeButtons = 'Source,NewPage,Print,Templates,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Blockquote,CreateDiv,PageBreak,Iframe,Maximize,ShowBlocks,About,BidiLtr,BidiRtl,Language';
? ? //上傳圖片窗口用到的接口
? ? config.filebrowserImageUploadUrl = "Upload.ashx";
? ? // 使上傳圖片彈窗出現對應的“上傳”tab標簽
? ? config.removeDialogTabs = 'image:advanced;link:advanced';
? ? //工具欄是否可以被收縮
? ? //config.toolbarCanCollapse = true;
? ? config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
? ? config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
? ? //config.filebrowserImageUploadUrl = ckfinderPath + 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
? ? config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
? ? config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
? ? config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
};
????其中的：
????config.filebrowserImageUploadUrl?=?"Upload.ashx";
????就是上傳圖片用到的接口（待會要上傳的action）
（2）修改ckeditor\plugins\image\dialogs\image.js文件。搜索“browseServer”，將其中的label:d.lang.common.browseServer,hidden:!0?修改為hidden:0。搜索“image_previewText”，將||后“”中的一大段字符串刪除。
3、ckfinder配置的修改
??????修改ckfinder\config.ascx用戶控件文件，更改其BaseUrl路徑：
??????BaseUrl?=?"~/uploader/";?????//前提條件是根目錄上必需存在用來存放上傳文件的uploader文件夾。
??????并且將CheckAuthentication()函數中的返回值從false修改為true，去掉去掉身份驗證
public?override?bool?CheckAuthentication()
{
????return?true;
}
至此，配置工作終于完成。
?
三、在頁面中應用
1、添加dll引用
????在“解決方案資源管理器”中右擊項目，在彈出的快捷菜單中單擊“添加引用”，在“瀏覽”選項卡中選擇ckfinder\bin\Release\CKFinder.dll文件，將CKFinder.dll添加到當前工程中。
?????
2、匹配上傳圖片數據格式
?????ckeditor4期望從后端返回的是一個Json格式數據，包含下面幾個字段，數據格式外層不需要狀態碼200或者其他data套著，直接返回。
????????????????????????????????????????????????????圖5
?????當用戶點擊“上傳到服務器”按鈕會讓路徑自動處理并返回一個JSON格式的數據：
成功上傳文件后，期望包含以下條目的JSON響應：
{
????"uploaded":?1,
????"fileName":?"foo.jpg",
????"url":?"/files/foo.jpg"
}
（1）??因此，需要創建一個處理JSON格式數據的類Json.cs，代碼如下：
using?System;
using?System.Collections.Generic;
using?System.Linq;
using?System.Web;
///?<summary>
///Json?的摘要說明
///?</summary>
public?class?Json
{
??public?Json()
??{
????//
????//TODO:?在此處添加構造函數邏輯
????//
??}
??public?string?uploaded?{?set;?get;?}
??public?string?fileName?{?get;?set;?}
??public?string?url?{?get;?set;?}
}
（2）?添加“Newtonsoft.Json.dll”引用。將Newtonsoft.Json.dll添加到當前工程中。
3、設計圖片上傳接口Upload.ashx(上傳的action)
<%@?WebHandler?Language="C#"?Class="Upload"?%>
using?System;
using?System.Web;
using?Newtonsoft.Json;
using?System.IO;
public?class?Upload?:?IHttpHandler
{
????public?void?ProcessRequest(HttpContext?context)
????{
????????HttpPostedFile?uploads?=?context.Request.Files["upload"];
????????string?CKEditorFuncNum?=?context.Request["CKEditorFuncNum"];
????????string?file?=?System.IO.Path.GetFileName(uploads.FileName);
????????//?圖片上傳到uploader\images\目錄
????????uploads.SaveAs(context.Server.MapPath("~\\uploader\\images\\")?+?file);
????????string?url?=?"uploader/images/"?+?file;
????????Json?Json1?=?new?Json();
????????Json1.uploaded?=?"1";
????????Json1.fileName?=?"ImageName";
????????Json1.url?=?"uploader/images/"?+?file;
????????string?jsonstr?=?JsonConvert.SerializeObject(Json1);
????????context.Response.Clear();
????????context.Response.Write(jsonstr);
????????context.Response.End();
????}
????public?bool?IsReusable
????{
????????get
????????{
????????????return?false;
????????}
????}
}
4、頁面設計
(1)???在頁面上添加一個textarea組件:
??????<textarea?name="editor1"?id="editor1"?rows="10"?cols="80">
?????????This?is?my?textarea?to?be?replaced?with?CKEditor.
??????</textarea>
(2)???在頁面的head中添加:
????<script?src="ckeditor/ckeditor.js"?type="text/javascript"></script>
????<script?src="ckfinder/ckfinder.js"?type="text/javascript"></script>
????<script?type="text/javascript">
??????//?使用CKEditor替換?<textarea?id="editor1">
??????//?實例化，使用默認配置
??????window.onload?=?function?()?{
????????//?創建編輯器
????????var?editor?=?CKEDITOR.replace('editor1');
????????//?為編輯器綁定"上傳控件"
????????//CKFinder.setupCKEditor(editor,?'/ckfinder/');
??????};
????</script>
至此，大功告成。運行程序，就可實現文字的編輯和圖片的上傳。
單擊工具欄上“圖像”圖標，出現如圖5所示的“圖像屬性”對話框。切換到“上傳”選項卡，單擊“選擇文件”按鈕，在彈出的“打開”窗口中選擇一個圖片文件：
???????選擇圖片后，單擊“打開”，顯示：
?????單擊“上傳服務器”按鈕，系統調用圖片上傳接口Upload.ashx，將圖片上傳到指定位置，并將該圖片顯示在“圖像信息”窗口：
???????調節寬度、高度等圖像信息后，單擊“確定”按鈕，系統就將該圖片插入CKEditor編輯窗口中：
?
總結
以上是生活随笔為你收集整理的.net中使用ckeditor4+ckfinder上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。
