欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

fckEditor的使用以及图片上传不显示解决

程序员文章站 2022-05-25 21:41:15
...

写过博客的都是 在写博客的textarea 上面有一些按钮 类似 word 工具栏 他们其实就是xhEditor.网页编辑器。今天记录的也是一种网页编辑器。就是FCkEditor。使用他需要准备前端FckEditor插件包。可以在官网下载https://ckeditor.com/  还有就是java-core2.6.jar . 将他们引入工程里。

前端代码如下：

<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!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>Insert title here</title>
<script type="text/javascript" src="${ctx}/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
$(function(){
	var fck=new FCKeditor("mytext");
	//设置根目录
	var path="${pageContext.request.contextPath }";
	fck.BasePath=path+"/fckeditor/";
	fck.Height=400;
	fck.Config["ImageUploadURL"]=path+"/edit/uploadForFck";
	//渲染到textarea
	fck.ReplaceTextarea();
});
</script>
</head>
<body>
<textarea id="mytext"></textarea>
</body>
</html>
这里说明一下 ：我的jquery-1.12.4.js js的核心 其实已经引入了。这个页面是ajax 局部刷新的 所以没有再次引用。假如只是新的页面的话需要核心js 引入。配置文件信息可以
到fckeditor/fckconfig.js 中查看  在页面js中修改。

注意二：我的fckeditor 放在webapp 下，其他页面使用他的话 使用

pageContext.request.contextPath 加上+文件路劲 （绝对路径） 这样可以无论你的使用页面在哪里  都可以找到引用的文件。
重点：通过查阅资料发现要实现上传的话需要修改
fck.Config["ImageUploadURL"]=path+"/edit/uploadForFck";
这是自己上传路径。经过测试发现图片不显示。火狐浏览器没有报错。于是在IE测试发现图片报资源找不到。原来是因为我上传到本地的D:/upoload 浏览器网站不允许直接去盘里直接访问
所以自己需要修改路径 也就是在tomcat 配置虚拟路径。如下： <Context debug="0" docBase="D:\" path="/file" reloadable="true"/> 这样在java 上传到本地后 fck需要回显的话路径写虚拟路径。
Java 上传代码：

	@RequestMapping("/uploadForFck")
	public void uploadForFck(HttpServletRequest request, PrintWriter out) throws IOException{
		//强制转换request
		MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
		//获得文件
		Iterator<String> iter = mr.getFileNames();
		String fileInputName = iter.next();
		MultipartFile mf = mr.getFile(fileInputName);
		//获得文件的字节数组
		byte[] byteArr = mf.getBytes();
		String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
		Random  random = new Random();
		for(int i = 0 ; i < 3; i++){
			fileName = fileName + random.nextInt(10);
		}
		//获得原始文件名
		String oriFileName = mf.getOriginalFilename();
		String suffix = oriFileName.substring(oriFileName.lastIndexOf("."));
		//获得上传文件的绝对路径
		String realPath =  "D:/"+fileName + suffix;
		String path="/file/"+fileName + suffix;
		FileCopyUtils.copy(byteArr, new FileOutputStream(new File(realPath)));
		//创建fck的上传的响应对象
		UploadResponse ur = UploadResponse.getOK(path);
		out.print(ur);
	}






					

																				

						

							上一篇：							
								解决php文字及图片显示乱码的问题							
						

						

							下一篇：							
								居中的ImageSpan							
						

					

															

						

							推荐阅读