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

最新推荐文章于 2023-04-11 17:20:04 发布

蜗牛乌龟一起走

最新推荐文章于 2023-04-11 17:20:04 发布

阅读量1.5k

点赞数 1

分类专栏：前端jqueryUI

本文链接：https://blog.csdn.net/qq_29897369/article/details/77916128

版权

前端jqueryUI 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

写过博客的都是在写博客的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);
	}

蜗牛乌龟一起走

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
fckEditor的使用以及图片上传不显示解决

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

扫一扫