当前位置：首页 > news >正文

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

news 2025/6/6 13:27:57

写过博客的都是在写博客的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";//渲染到textareafck.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{//强制转换requestMultipartHttpServletRequest 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);}

查看全文

http://www.xdnf.cn/news/852625.html