说明:
大家都知道在良好的web架构中,图片和web站点是分开的,放在不同的服务器上,实现静态资源分离。也就是说我们的web 在使用ueditor富文本
编辑器时上传插件上传的图片也应该上传到 图片资源服务器中,即上传到远程服务器上, 甚至可能要实现跨域上传。
本文实战采用nginx+tomcat+redis集群方式把项目中使用到的百度ueditor富文本插件中的图片等附件统一上传到同一台服务器进行保存并查看。
实现步骤:
1、远程环境部署:先搭建远程ueditor服务端,在一台资源服务器或者数据库服务器上部署一个tomcat,并在tomcat/webapps下新建一个web项目ueditorfiles,放入以下文件:
2、config.json 文件到ueditor1_4_3-utf8-jsp/jsp 下获取,主要修改内容如下:
一般只需要调整:imageUrlPrefix
例子:"imageUrlPrefix": "http://xxx.xxx.xxx.xxx/ueditorfiles", /* 图片访问路径前缀 */
imagePathFormat 根据自己的实际情况调整,一般不动。
3、controller.jsp文件到ueditor1_4_3-utf8-jsp/jsp下 获取,如果存在跨域增加以下标红内容,如果不存在跨域问题就不用修改,直接拿过来用就好了:
<%@ page language="java" contentType="text/html; charset=UTF-8"
import="com.baidu.ueditor.ActionEnter"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With");
String rootPath = application.getRealPath( "/" );
out.write( new ActionEnter( request, rootPath ).exec() );
%>
4、WEB-INF内容:从ueditor1_4_3-utf8-jsp/jsp/lib 下获取:
5、启动tomcat,访问后能显示下面截图内容才是正确有效的部署,如图:
6、客户端配置(无论多少个Tomcat的配置都是一样的),进入:客户端的tomcat/项目/ueditor1_4_3-utf8-jsp 下找到:ueditor.config.js文件
修改下面内容,注释掉原上传到本地的serverUrl 修改成你上面远程已经部署好的路径:
// 服务器统一请求接口路径
//, serverUrl: URL + "jsp/controller.jsp"
, serverUrl: "https://xxx.xxx.xxx.xxx/ueditorfiles/controller.jsp"
(大家注意!!客户端这边只需要修改:ueditor.config.js中第33行这一个地方就可以了,其它任何东西都不要动,此时客户端下/ueditor1_4_3-utf8-jsp/jsp 目录相当于废弃。)
至此,整个ueditor插件上传的文件都可以上传到远程服务器了:
时间有限匆匆写下,大家凑合看!!!