您的位置：首页 > 其它

在项目中使用最新的ckeditor4.3.1的全过程+增加自己的上传本地图片按钮及将上传图片返回、保存

2013-12-13 20:13 726 查看

在做一个购物网站，产品简介里需要添加图片或者更多的编辑方式来描述产品，就需要html编辑器，网上现有的都是很古老的版本，界面不好看。于是去了ckeditor的官网上下载了最新的版本，蹩脚的英语加上网页翻译终于找到了怎么用：

一，引入。将ckeditor文件夹拷到你的项目里，我是直接拷到了WebRoot下面，引入完成，就这么简单。

二，在你想使用编辑器的jsp页面上面，加上一句

<script type="text/javascript" src="${pageContext.request.contextPath }/ckeditor/ckeditor.js"></script>

将页面的textarea由<textarea name="xxx"></textarea>改为<textarea class="ckeditor" name="xxx"></textarea>

刷新一下页面，时尚的编辑界面会让你眼前一亮~

在插入图片的时候，点开图片按钮，但是没有找到上传按钮，好像是本身不带这个功能还是没有开启，但是我自己有上传文件的模块，因此如果能新增一个本地上传的按钮，点开跳转到我自己的上传界面，点击上传之后先把文件保存到我的服务器端再把文件的目录返回到ckeditor的上传图片对话框中就完美了。

实际也就是这么解决的：首先打开ckeditor/plugins/image/dialogs/image.js，ctrl+F搜索urlMissing，在“urlMissing)},”的后面加上：

{type:'button',id:'myUpload',style:'display:inline-block;margin-top:10px;',align:'center',label:'本地图片',onClick:function(){var retFile=showModalDialog('${pageContext.request.contextPath }/system/uploadFileAction_upload.do','','dialogHeight:20;dialogWidth:29;');if(retFile
!= null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},

这时候在上传图片对话框就会出现本地上传按钮，其中${pageContext.request.contextPath }/system/uploadFileAction_upload.do为自己的项目上传文件的请求地址。

（注：如果界面出不来的话就清空一下浏览器缓存，还不行的话就重启一下服务器）

这时候已经可以打开自己的上传文件jsp了（为upload.jsp，是一个模式对话框。我的上传文件提交后跳转到uploadfinish.jsp），我的uploadfinish.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片上传结束</title>
<SCRIPT LANGUAGE="JavaScript">
<!--//返回图片路径给ckeditor
	function writefile(){
		var imagepath="${pageContext.request.contextPath}${imagepath}";
		window.returnValue = imagepath;
		window.close();
	}
//-->
</SCRIPT>
</head>
<body onload="writefile()">
<center>图片上传成功</center>
</body>
</html>

imagepath是服务器端保存文件时在request中设置的图片路径。

我预想的是这样：点击上传后直接窗口直接关闭，并在ckeditor上传图片对话框中返回图片路径并且可以预览。
但是实际情况是点击上传后并没有关闭窗口，而是新打开了一个窗口并且询问是否要关闭窗口，关闭了之后ckeditor上传图片对话框并没有相应的路径。

百度了一下，只要在模式对话框所在的jsp文件的head中加入 <base target="_self"/> 即可。一试果然成功了！倍感欣慰啊！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航