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

来源：互联网发布：手机图标软件编辑：程序博客网时间：2024/06/05 06:23

最近项目涉及富文本框功能，一番调研后，决定使用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"/>
九、自定义上传路径两种方式（时间不够改天再补）
参考文档:

官方文档
http://blog.csdn.net/huangwenyi1010/article/details/51638123#reply 三部曲
http://blog.csdn.net/yuancenyi/article/details/53327414 自定义上传路径

阅读全文

0 0

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

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