.NET 中开启CKEditor 3 文件、图片上传功能

此范例是用JS调用CKEditor 的。

 

下面是html代码：

　　<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>

　　<textarea id="editor1"></textarea>

    <script type="text/javascript">
        CKEDITOR.replace('editor1',
        {
            toolbar:"Full",
            filebrowserUploadUrl: '/ckeditor/app/Upload.aspx?type=File',  //开启文件上传（此项会同时开启图片和FLASH上传）
            filebrowserImageUploadUrl: '/ckeditor/app/Upload.aspx?type=Images',  // 开启图片上传
            filebrowserFlashUploadUrl: '/ckeditor/app/Upload.aspx?type=Flash'  //开启FLASH上传
        }); 
    </script>

这样的代码就可以把CKEditor 的上传功能打开，在“图像：面板就会多出一个“上传”选项卡。上面的Upload.aspx是上传功能实现页面，自己创建，代码如下：

　　　　protected void Page_Load(object sender, EventArgs e)
        {
            Response.Clear();
            if (Request.Files.Count > 0)
            {
                string output = @"<script type=""text/javascript"">window.parent.CKEDITOR.tools.callFunction({0} ,'{1}');</script>";
                System.Web.HttpPostedFile f = Request.Files["upload"];
                string filename = "/UploadFile/" + System.Guid.NewGuid().ToString() + f.FileName.Substring(f.FileName.LastIndexOf("."));
                f.SaveAs(Server.MapPath("~" + filename));
                output = string.Format(output, Request["CKEditorFuncNum"], filename);
                Response.Write(output);
                Response.End();
            }
            else
            {
                Response.Write("no file");
                Response.End();
            }
        }

这段代码中有几点是要注意的，1.Request.Files["upload"]中的”upload“是CKEditor上传控件file的name，2.Request["CKEditorFuncNum"]中的”CKEditorFuncNum“,这个参数是用来回调页面的，就是上传成功后，页面自动切换到“图像”选项卡。而window.parent.CKEDITOR.tools.callFunction(FuncNum ,Url);就是回调处理方法。利用谷歌的开发人员工具可以看到CKEditor上传文件的form：

<form enctype="multipart/form-data" method="POST" dir="ltr" lang="zh-cn" action="/ckeditor/emall/Upload.aspx?type=Images&CKEditor=editor1&CKEditorFuncNum=2&langCode=zh-cn">
　　<label id="cke_153_label" for="cke_154_fileInput_input" style="display:none">上传到服务器上</label>
　　<input id="cke_154_fileInput_input" aria-labelledby="cke_153_label" type="file" name="upload" size="38">
</form>

可以看到回传当中的所有参数。CKEditor=editor1&CKEditorFuncNum=2&langCode=zh-cn这些是CKEditor自动追加的。

至此，上传功能开启完成！

另外，如果想隐藏”图像“面板中的”超链接“和”高级“选项卡，可以在CKEditor的plugins/image/dialogs/image.js中搜索"Link"和”advanced“在”id:'Link',“和”id:'advanced',“加入”hidden:true,“即可。

完成效果图：