ueditor jsp版 在SSH2项目中使用小结

最近项目涉及富文本框功能，一番调研后，决定使用ueditor。因其文档齐全，且出自百度，放心!

看了官方文档，也看了不少兄弟的博客，踩了一些坑，在此记录下。

主要关注几个文件：

1、jsp/config.json（上传文件、涂鸦、图片、视频等路径配置）

2、controller.jsp（内部action统一转发）

3、ueditor.config.js（默认配置）

4、ueditor.all.js/ueditor.all.min.js

一、简介

ueditor是百度编辑器，官网地址： http://ueditor.baidu.com/website/

完整的功能演示，可以参考： http://ueditor.baidu.com/website/onlinedemo.html

下载地址： http://ueditor.baidu.com/website/download.html

下载开发版本jsp-utf8版本，下载的zip包解压后，重命名utf8-jsp为editor，

然后将其拷贝到项目中，我放的路径为WebRoot/plugin/下

二、如何引入ueditor编辑器

下载包的index.html是编辑器示例，主要几处代码如下：

<head>
   ……
<!--编辑器基本配置-->
<script type="text/javascript" src="plugin/ueditor/ueditor.config.js"></ script>
<!--编辑器完整代码-->
<script type="text/javascript" src="plugin/ueditor/ueditor.all.js"> </script >
  ……
</head>
<body>
<div>
<script id="editor" type="text/plain"></ script>
</div>
<script type="text/javascript">
//实例化编辑器
var ue = UE.getEditor( 'editor', {
        autoHeightEnabled: true,
        autoFloatEnabled: true,
        initialFrameWidth: 690,
        initialFrameHeight:483
    });
</script>

三、修改文件 ueditor.config.js

注意： var URL = window.UEDITOR_HOME_URL || "/abc/plugin/ueditor/";

, serverUrl: URL + "jsp/controller.jsp"（abc表示项目部署跟目录）

四、修改文件 jsp/config.json（主要是配置图片、文件、视频上传路径等）

该配置文件上传路径为/upload/notice/image/...

注意：各个配置的“*UrlPrefix”（回显时自动添加url的前缀）、“*PathFormat"（文件上传路径）

config.json最后部分，配置文件、图片在线回显路径（只需要配置跟路径，会自动回显根路径下所有路径的文件，此处路径需对照前面文件保存路径处理）

五、修改jsp/controller.jsp 该文件主要是实现所有请求入口，可在此文件对请求Action进行过滤处理

<%
    request.setCharacterEncoding( "utf-8" );
	response.setHeader("Content-Type" , "text/html");
	String rootPath = application.getRealPath( "/" );
// 	out.write( new ActionEnter( request, rootPath ).exec() );
	String result = new ActionEnter( request, rootPath ).exec();  
	String action = request.getParameter("action");
	//图片、附件在线管理中回显时，格式化回显路径，否则无法正常格式化
	if( action!=null && (action.equals("listfile") || action.equals("listimage"))){  
	    rootPath = rootPath.replace("\\", "/");  
	    result = result.replaceAll(rootPath, "/");  
	}  
	out.write( result ); 
%>

六、优化图片选择（解决选择图片时很慢问题）

修改ueditor/ueditor.all.js ueditor/ueditor.all.min.js

ctrl+f 搜索 accept

搜到的涉及图片的改为如下：

accept="image/jpg,image/jpeg,image/gif,image/png,image/bmp"

七、表情包本地化（解决通过网络获取方式表情包显示异常）

到官网下载本地表情包：

http://ueditor.baidu.com/website/download.html#ueditor

表情文件本地化使用说明：

（1）images目录下的所有表情文件夹复制到dialogs/emotion/images/文件夹下面

（2）修改editor_config.js文件，去掉 emotionLocalization 项的注释，值改为true。

八、解决上传附件有中文名的，下载附件时下载失败问题

修改tomcat配置文件 /conf/server.xml

<Connector port="8080" protocol="HTTP/1.1"

connectionTimeout="20000"

redirectPort="8443" URIEncoding="UTF-8"/>

九、自定义上传路径两种方式（时间不够改天再补）

参考文档:

1. 官方文档
   
2. http://blog.youkuaiyun.com/huangwenyi1010/article/details/51638123#reply 三部曲
3. http://blog.youkuaiyun.com/yuancenyi/article/details/53327414 自定义上传路径