公司业务需要使用到富文本编辑器，以前从来没有玩过这玩意，在网上搜到了百度的ueditor听说还不错。然后根据一些博客上面的步骤进行开发，但是到了图片上传的这里卡住了，图片上传始终有问题。好不容易图片上传上去了，但是又发现一个问题，图片只能上传到内部路径，也就是tomcat 下面，但是这样有个问题，每次重新部署项目的时候，就会把之前上传的所有图片clear

那么怎么把图片上传到我外部的目录例如D:/upload/下写呢 下面把详细步骤写下来。

1. 首先在百度editor官网上下载ueditor 包 和jar 怎么下载在这里不在赘言， 官网上有说明。

    下载解压后是这样的

      

swift 富文本 图片文字 富文本编辑器上传图片_tomcat

我放在js文件夹下面

swift 富文本 图片文字 富文本编辑器上传图片_上传_02

在jsp下面引用两个js 文件ueditor.config.js， ueditor.all.js

只需在div里面加入如下代码


<div style="height: 400px; width: 800px;">
		        <script id="container" name="content" type="text/plain">      					
                        </script>  
			<script type="text/javascript">  
			 var editor = UE.getEditor('container')   
			</script>   
</div>



运行该页面即可以加载出富文本编辑器

swift 富文本 图片文字 富文本编辑器上传图片_swift 富文本 图片文字_03


 



编辑器出来后就到了相当麻烦的图片上传了




1.首先在ueditor.config.js 


 var URL = window.UEDITOR_HOME_URL || "/projectName/js/ueditor/"; 这样让js去加载富文本的相关文件


2. 在config.json 里设置 imageUrlPrefix的值为相当路径，我是这样写的


 "imageUrlPrefix": "http://localhost:8080/projectName", /* 图片访问路径前缀 */




配置完成，现在就可以把图片上传到tomcat 的根目录下面。 做到这里以为大功告成，但是问题还在后面，由于放在tomcat根目录下面所以只要每次重新部署就会把之前的上传的文件包括文件夹全部clean


在网上找了半天，终于找到这篇博客，


详情可以点进去看看。这里不再最赘言。




换成了ueditor-1.1.1.1 jar 后 在controller.jsp里面把代码改成如下


String rootPath = application.getRealPath( "" );
	String saveRootPath ="F:/";
	out.write( new ActionEnter( request, saveRootPath, rootPath ).exec());



这时文件就能上传到外部路径了。但是又遇到了问题，上传成功的图片不能回写到编辑器里，这是因为

在jsp 文件中 <img src="F:/upload/image/test.jpg"/> 这样是引不到图片的。因为，JSP页面在引图片的时候是 在页面解析的路径是:<img src="http://localhost:8080/upload/images/test.jpg">。也就是说JSP在引图片的时候是先去你的工程目录下找的。所以如果要在JSP中引入其他盘符的图片，那只能配置虚拟路径。   


配置虚拟路径很简单只需要在tomcat server.xml  文件的host节点下面加上


<Context path="/projectName/ueditor" docBase="F:/ueditor" />



这样就可以把文件上传到外部路径，但还是可以通过http://localhost:8080/upload/images/test.jpg的方式访问图片，不用担心被clean。