CKEditor 4.7实现图片上传服务器

最新推荐文章于 2024-04-20 12:06:07 发布

CahierX

最新推荐文章于 2024-04-20 12:06:07 发布

阅读量3.1k

点赞数

文章标签： CKEditor 4.7实现图片上传服务

本文链接：https://blog.csdn.net/qq_35493664/article/details/78248097

版权

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

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

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

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

config.filebrowserUploadUrl = '/ckeditorUpload?type=File';

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

后台接受代码（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

CahierX

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CKEditor 4.7实现图片上传服务器

1.首先去官网下载CKEditor,要想上传图片需要下载基础包装之上的版本2.下载好了之后打开ckeditor\plugins\image\dialogs\image.js文件在打开的文件搜索hidden，找到Upload 将它后面的！0修改为03.打开CKEditor根目录下的ckeditor.js 在里面添加下面这句话config.filebrow
复制链接

扫一扫