重点:看一下你使用的CKEditor版本

过程:

后台需要一款富文本编辑器。经过挑选后,最后选择了FCKEditor 的升级版 CKEditor 。在官网下载了4.10.1版本。

经过一番配置后,富文本可以正常显示。在上传图片的时候,出现了问题。一直提示我“不正确的服务器响应”。经过一番搜索发现配置和网上给出的配置都是一样的,却总还是错误。

后来发现一篇说新版本的CKEditor上传图片的返回值修改了。经过一番摸索,终于解决问题。

上图:

原来之前的版本使用的通过 script 控制的tab跳转并填入图片地址的方式新版本已经弃用,改用新的Json 的方式传递。下面贴上配置和后端代码:

CKEditor config.js配置

     //上传图片的方法
config.filebrowserImageUploadUrl = "/Home/Upload"; //图片默认显示文字为空
config.image_previewText = ' '; //设置语言
config.language = 'zh-cn'; // 解决CKEditor图片宽度自适应的问题 p img { width: auto; height: auto; max - width: 100 %;}
config.disallowedContent = 'img{width,height};img[width,height]';

后端Upload方法 

        [HttpPost]
public JsonResult Upload(HttpPostedFileBase upload)
{
string savePath = "/upload/";
string dirPath = Server.MapPath(savePath); //如果目录不存在则创建目录
if (!Directory.Exists(dirPath))
Directory.CreateDirectory(dirPath); //获取图片文件名及扩展名
var fileName = Path.GetFileName(upload.FileName);
string fileExt = Path.GetExtension(fileName).ToLower(); //用时间来生成新文件名并保存
string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
upload.SaveAs(dirPath + "/" + newFileName); //上传成功后,我们还需要返回Json格式的响应
return Json(new
{
uploaded = ,
fileName = newFileName,
url = savePath + newFileName
});
}

前端调用

//引入js文件
<script src="~/Content/ckeditor/ckeditor.js"></script>
<script src="~/Content/ckeditor/config.js"></script>

//ckditor容器
@Html.TextAreaFor(model => model.ContentInfo, new { @class = "ckeditor" })

最新文章

  1. MySQL使用技巧收集,持续更新中......
  2. [No000007]搜索引擎以图搜图的原理
  3. Android课程---布局管理器之相对布局(一)
  4. IE 11 保护模式害惨了我
  5. 解决Ubuntu下 Could NOT find CURL (missing: CURL_LIBRARY CURL_INCLUDE_DIR)
  6. js-事件、正则表达式
  7. CVE爬虫抓取漏洞URL
  8. php 命名空间的目的
  9. 使用fontawesome图标
  10. React Native App设置&amp;Android版发布
  11. UWP 手绘视频创作工具 “来画Pro” 技术分享系列
  12. 通过SDK和API获取阿里云RDS的监控数据
  13. 线性代数之行列式的C#研究实现
  14. vue+Element实现静态旅游网站
  15. order by 的用法
  16. Angular系列文章之angular路由
  17. Linux-bg和fg命令(19)
  18. 内核IS_ERR宏解析 【转】
  19. Centos7 安装ELK日志分析
  20. [SublimeText] Sublime Text 2 在 Ubuntu 上安装指南

热门文章

  1. [Node.js] 3、搭建hexo博客
  2. 【angular5项目积累总结】文件上传
  3. html+ashx制作网页发布之后遇到的问题
  4. PetaPoco源代码学习--3.Sql类
  5. Gson 使用和原理
  6. linux7 安装GitLab
  7. POJ3264(KB7-G RMQ)
  8. CSS 关于屏幕适配REM
  9. 洛谷P4198 楼房重建(线段树)
  10. OSGI企业应用开发(十二)OSGI Web应用开发(一)