文档章节

【CKeditor】使用SpringMVC处理CKeditor上传图片

666B
 666B
发布于 2014/07/28 22:07
字数 338
阅读 8949
收藏 5

0、了解CKeditor的相关文件以及引入js

    引入ckeditor的js

<script type="text/javascript" src="<c:url value="/resources/js/ckeditor/ckeditor.js" />"></script>

1、开启CKeditor上传图片功能

官方说明

简明的说,就是只需要在创建CKeditor时,添加以下两个配置:

在用CKEDITOR.replace()中配置

filebrowserBrowseUrl: '自定义的请求',
filebrowserUploadUrl: '自定义的请求'
CKEDITOR.replace('editor',{
    filebrowserBrowseUrl: '/browser/browse.php',
    filebrowserUploadUrl: '/uploader/upload.php'
});

或,在config.js添加如下配置

config.filebrowserBrowseUrl='自定义的请求', config.filebrowserUploadUrl='自定义的请求' 

2、编写自定义的请求

@RequestMapping(value="/ckeditor/uploadFile")
	public void uploadFile(@RequestParam("upload") MultipartFile multipartFile,HttpServletRequest request,HttpServletResponse response){
		response.setContentType("text/html;charset=UTF-8");
//		response.setHeader("X-Frame-Options", "SAMEORIGIN");
		String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
		PrintWriter out;
		String s = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction("+CKEditorFuncNum+", '"+multipartFile.getOriginalFilename()+"');</script>";
		try {
			out = response.getWriter();
			out.print(s);
			out.flush();
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		
	}




问题及解决方案:

1、解决ckeditor上传,返回时显示js代码不显示图片的问题

问题解决:

未配置response的ContentType

response.setContentType("text/html;charset=UTF-8");

解决ckeditor上传,返回时显示js代码不显示图片的问题  

2、跨域问题

chrome console log:

Refused to display 'http://localhost:8080/webcnmain/ifacompany/article/uploadArticleImageForCkeditor?CKEditor=articleContentZH&CKEditorFuncNum=1&langCode=zh-cn' in a frame because it set 'X-Frame-Options' to 'DENY'.

解决方法

response.setHeader("X-Frame-Options", "SAMEORIGIN");

3.spring 上传文件未配置相关的视图解析器

java.lang.IllegalArgumentException: Expected MultipartHttpServletRequest: is a MultipartResolver configured?


© 著作权归作者所有

666B
粉丝 33
博文 97
码字总数 36608
作品 0
深圳
程序员
私信 提问
加载中

评论(4)

BigEcho
BigEcho
写的挺好的,谢谢啦
baojieearth
baojieearth

引用来自“baojieearth”的评论

按你说的配置了config.js上传功能没显示啊,是不是哪里还需要改的?版本是4.4.5

引用来自“Jast2014”的评论

你是在config.js文件中配置的?如果是的话,可能要重新发布下项目。
好了已经,ckeditor/plugins/image/dialogs/image.js 这个里面Upload",hidden:false,不然还是不显示的
666B
666B 博主

引用来自“baojieearth”的评论

按你说的配置了config.js上传功能没显示啊,是不是哪里还需要改的?版本是4.4.5
你是在config.js文件中配置的?如果是的话,可能要重新发布下项目。
baojieearth
baojieearth
按你说的配置了config.js上传功能没显示啊,是不是哪里还需要改的?版本是4.4.5
CKEditor3.x 在Java项目中配置、包括图片上传(支持FTP、图片压缩)

CKEditor 3.x配置说明 一、基本使用: 1、所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip 下载地址:http://ckeditor.com/download 2、配置使用 A.将下载下来的CKEditor压缩...

一枚Sir
2014/05/29
2.4K
0
CKEditor 又拍云上传插件新鲜出炉!

What is CKEditor? CKEditor 是一个基于网页的开源 WYSIWYG 编辑器。CKEditor 因为十分轻便,很容易在不同的环境中嵌入。 How to install origin CKEditor? Ckeditor 的安装十分简单,下载链...

又拍云
2016/12/30
2
0
在django的admin使用ckeditor模块

首先在这个网站下载最新的django-ckeditor安装包: https://github.com/jeffh/django-ckeditor 然后解压缩,使用:python setup.py install安装,如果不是root用户,需要sudo 一。在你的解压缩...

岭南六少
2011/08/06
1K
0
PHP中配置Ckeditor+Ckfinder 完成图片上传

用久了fckeditor,看惯了其略显陈旧的界面,听说其弟弟CKeditor更酷更炫,今天就来试试吧。CKeditor文件下载:http://ckeditor.com/download ,目前的最新版本是CKEditor 3.4.2。 CKeditor是...

冯京宝
2012/07/20
1K
0
CKEditor和CKFinder整合实现上传下载功能

事先说明:此整合的是java版本的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其它框架技术) 一.需要的资源: 用到的网站,文件自己下载: a) ckeditor_3.6.2 (解压) download...

jxlgzwh
2013/03/06
694
0

没有更多内容

加载失败,请刷新页面

加载更多

zk中leader和follower启动时信息交互

QuorumPeer中读取节点状态信息,不同状态下设置不同角色 1 Leader启动Follower接收器LearnerCnxAcceptor LearnerCnxAcceptor负责接收非leader连接请求,线程中创建LearnerHandler处理器 2 Le...

writeademo
36分钟前
5
0
完美的Linux之【navi】使用笔记

今天要说的是才上线才两天,就已经获得超过1000星。开发者是一位来自巴西的小哥Denis Isidoro。 开发的工具navi Linux用户的日常困惑 > 新命令 用完就忘 ? > 一时想不起来命令的单词怎么拼?...

我们都很努力着
38分钟前
6
0
iptables删除命令中的相关问题

最近在做一个V**N中间件的配置工作,在配置iptables的时候,当用户想删除EIP(即释放当前连接),发现使用iptables的相关命令会提示错误。iptables: Bad rule (does a matching rule exist ...

Linux就该这么学
50分钟前
5
0
ExtJS 4.2 评分组件

本文转载于:专业的前端网站➸ExtJS 4.2 评分组件 上一文章是扩展ExtJS自带的Date组件。在这里将创建一个评分组件。 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2...

前端老手
58分钟前
5
0
springboot2.0.6启动解析(四)观察器、启动的错报告、Headless模式相关分析

解析SpringApplication的run方法观察器、启动的错报告、Headless模式、监听器相关分析 public ConfigurableApplicationContext run(String... args) { // 构造一个任务执行观察器(Jav...

小亮89
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部