您的位置：首页 > 其它

CKEditor 4.7实现图片上传服务器

2017-10-16 11:42 323 查看


1.首先去官网下载CKEditor,要想上传图片需要下载基础包装之上的版本




2.下载好了之后打开ckeditor\plugins\image\dialogs\image.js文件

在打开的文件搜索hidden，找到Upload 将它后面的 ！0修改为0




3.打开CKEditor根目录下的ckeditor.js 在里面添加下面这句话

config.filebrowserUploadUrl = '/ckeditorUpload?type=File';
[/code]

这样就可以实现点击浏览图片，点上传到服务器，图片就可以通过后台代码接受并上传了



后台接受代码（asp.net）:

 /// <summary>
        /// ckeditor上传图片
        /// </summary>
        /// <param name="upload">预设参数叫upload</param>
        /// <param name="CKEditorFuncNum"></param>
        /// <param name="CKEditor"></param>
        /// <param name="langCode"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult UploadPicture(HttpPostedFileBase upload, string CKEditorFuncNum, string CKEditor,
            string langCode)
        {
            string result = "";
            var imageUrl = "";
            if (upload != null && upload.ContentLength > 0)
            {
                var idpath = Session["Username"];
                string path = @"../upload/" + Session["Username"] + "/" + upload.FileName;
                upload.SaveAs(Server.MapPath(path));
                imageUrl = Url.Content(path);
                //储存图片至Server
                var vMessage = string.Empty;
                result = @"<html><body><script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" +
                         imageUrl + "\", \"" + vMessage + "\");</script></body></html>

自己使用时将路径进行相应的修改即可

参考文章：https://segmentfault.com/a/1190000010294176
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航