文档章节

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

666B
 666B
发布于 2014/07/28 22:07
字数 338
阅读 8927
收藏 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
691
0

没有更多内容

加载失败,请刷新页面

加载更多

MongoDB复制集

MongoDB复制集 2017年07月09日 19:36:01 zzm_ 阅读数 1 原文链接:http://blog.51cto.com/dreamlinux/1945705 MongoDB目前的高可用架构主要有主从、复制集、以及分片,单纯的主从技术几乎被淘...

linjin200
19分钟前
5
0
高防CDN是如何保障互联网安全?

DDoS攻击,一直是剪不断理还乱,而如何防御DDoS,也一直是网络安全的世纪难题。虽然CDN技术在不断增强,但更可怕的是DDoS攻击手段也在不断升级多元化,攻击渠道甚至更多种,所以普通的CDN加速...

云漫网络Ruan
20分钟前
5
0
springcloud 配置 springboot admin详解

1.配置pom 引入相关依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jetty</artifactId> </dependenc......

spirngbootcloudssm
21分钟前
4
0
Mockito 2 关于打标(stubbing)

请参考下面有关于打标的代码。 //You can mock concrete classes, not just interfaces LinkedList mockedList = mock(LinkedList.class); //stubbing when(mockedList.get(0)).thenReturn("......

honeymoose
23分钟前
5
0
kafka安装和启动

kafka的背景知识已经讲了很多了,让我们现在开始实践吧,假设你现在没有Kafka和ZooKeeper环境。 Step 1: 下载代码 下载1.1.0版本并且解压它。 > tar -xzf kafka_2.12-2.3.0.tgz> cd kafka_...

roockee
25分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部