使用百度editor 富文本编辑器上传图片

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

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

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

    下载解压后是这样的

      

  新建一个文件夹ueditor把这些文件全部放在里面放到web 工程的webRoot下面，我放在js文件夹下面

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

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

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

 

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

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

在网上找了半天，终于找到这篇博客，http://blog.csdn.net/ouyhong123/article/details/44461689

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

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

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

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

在jsp 文件中 这样是引不到图片的。因为，JSP页面在引图片的时候是 在页面解析的路径是:。也就是说JSP在引图片的时候是先去你的工程目录下找的。所以如果要在JSP中引入其他盘符的图片，那只能配置虚拟路径。   

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

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