简单2步实现 asp.net mvc ckeditor 图片上传

2022-03-13 11:45:41

1.打开ckeditor 包下的 config.js,添加一句配置（PS：ckeditor 很多功能都在该配置文件里配置），如下：

config.filebrowserImageUploadUrl = "/Home/Upload";

说明：ckeditor 默认编辑框的图片功能里是没有 “上传” 这个tab选项的，当配置上面那句后，就会出现“上传” tab选项。后面的 "/Home/Upload" 表示图片上传的后台处理程序路径。为了更直观的看到效果，下面为图片演示。

2.在Controller在实现upload Action，保存图片。

        [HttpPost]
        public ActionResult Upload(HttpPostedFileBase upload)
        {
            var fileName = System.IO.Path.GetFileName(upload.FileName);
            var filePhysicalPath = Server.MapPath("~/upload/" + fileName);//我把它保存在网站根目录的 upload 文件夹

            upload.SaveAs(filePhysicalPath);

            var url = "/upload/" + fileName;
            var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];

            //上传成功后，我们还需要通过以下的一个脚本把图片返回到第一个tab选项
            return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
        }

说明：就是第1步那一句配置，我们的本地图片上传功能差不多完成了一半了，而在这一步我们需要做的是把本地上传的图片保存到服务器，并使它在编辑框内显示。在上面那句配置里，我写了一个url路径，那么我们的图片上传就在这这个路径中处理，其实我们通过 F12 可以发现，它就是一个 <input type = 'file' />这样的标签，跟简单的文件上传没上面区别。下面为图片演示：

我在google上找到了一篇文章，他上面介绍了两种方式，一种是我这种在ckeditor中配置，另一种是通过外部的上传控件实现，然后再把它图像嵌入到ckeditor中去。

链接：http://www.codedigest.com/Articles/ASPNET/423_Upload_Images_and_Integrate_with_CKeditor_in_AspNet.aspx

码农公寓

相关文章