因设计一个线上考试系统，需要考生上传相关设计的图片，因此在网上查找了使用ckeditor+ckfinder技术上传图片的文章，网上相关文章很多，但大多都不能完全成功，通过不断的参考和大量的调试，总算成功地实现了图片的上传功能。
一、官方Download
1、CKEditor：选择”FullPackage”，单击“Download“按钮,下载文件：ckeditor_4.17.1_full.zip
2、CKFinder：点击标签下的“Downloadzippackape”按钮,下载文件：ckfinder_aspnet_2.6.3.zip
二、具体部署
1、分别解压下载下来的这2个文件，并把解压后的子目录ckeditor和ckfinder文件夹拷贝到你的项目中；
图1
2、CKEditor配置的修改
（1）设置CKEditor的工具栏
在win中双击ckeditor\samples\index.html:
图2
单击右上部的“TOOLBARCONFIGURATOR”按钮，出现工具栏按钮选择界面：
图3
配置完成，单击“Gettoolbarconfig”按钮，并将其中的配置代码拷贝到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:mon.browseServer,hidden:!0修改为hidden:0。搜索“image_previewText”，将||后“”中的一大段字符串删除。
3、ckfinder配置的修改
修改ckfinder\config.ascx用户控件文件，更改其BaseUrl路径：
BaseUrl="~/uploader/";//前提条件是根目录上必需存在用来存放上传文件的uploader文件夹。
并且将CheckAuthentication()函数中的返回值从false修改为true，去掉去掉身份验证
publicoverrideboolCheckAuthentication()
{
returntrue;
}
至此，配置工作终于完成。
三、在页面中应用
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，代码如下：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
///<summary>
///Json的摘要说明
///</summary>
publicclassJson
{
publicJson()
{
//
//TODO:在此处添加构造函数逻辑
//
}
publicstringuploaded{set;get;}
publicstringfileName{get;set;}
publicstringurl{get;set;}
}
（2）添加“Newtonsoft.Json.dll”引用。将Newtonsoft.Json.dll添加到当前工程中。
3、设计图片上传接口Upload.ashx(上传的action)
<%@WebHandlerLanguage="C#"Class="Upload"%>
usingSystem;
usingSystem.Web;
usingNewtonsoft.Json;
usingSystem.IO;
publicclassUpload:IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
HttpPostedFileuploads=context.Request.Files["upload"];
stringCKEditorFuncNum=context.Request["CKEditorFuncNum"];
stringfile=System.IO.Path.GetFileName(uploads.FileName);
//图片上传到uploader\images\目录
uploads.SaveAs(context.Server.MapPath("~\\uploader\\images\\")+file);
stringurl="uploader/images/"+file;
JsonJson1=newJson();
Json1.uploaded="1";
Json1.fileName="ImageName";
Json1.url="uploader/images/"+file;
stringjsonstr=JsonConvert.SerializeObject(Json1);
context.Response.Clear();
context.Response.Write(jsonstr);
context.Response.End();
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
4、页面设计
(1)在页面上添加一个textarea组件:
<textareaname="editor1"id="editor1"rows="10"cols="80">
ThisismytextareatobereplacedwithCKEditor.
</textarea>
(2)在页面的head中添加:
<scriptsrc="ckeditor/ckeditor.js"type="text/javascript"></script>
<scriptsrc="ckfinder/ckfinder.js"type="text/javascript"></script>
<scripttype="text/javascript">
//使用CKEditor替换<textareaid="editor1">
//实例化，使用默认配置
window.onload=function(){
//创建编辑器
vareditor=CKEDITOR.replace('editor1');
//为编辑器绑定"上传控件"
//CKFinder.setupCKEditor(editor,'/ckfinder/');
};
</script>
至此，大功告成。运行程序，就可实现文字的编辑和图片的上传。
单击工具栏上“图像”图标，出现如图5所示的“图像属性”对话框。切换到“上传”选项卡，单击“选择文件”按钮，在弹出的“打开”窗口中选择一个图片文件：
选择图片后，单击“打开”，显示：
单击“上传服务器”按钮，系统调用图片上传接口Upload.ashx，将图片上传到指定位置，并将该图片显示在“图像信息”窗口：
调节宽度、高度等图像信息后，单击“确定”按钮，系统就将该图片插入CKEditor编辑窗口中：
