将百度UEditor集成进SSH2项目中
1、为了让Struts2不拦截编辑器的文件上传,将filter改为拦截*.action
<filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*.action</url-pattern> </filter-mapping>
2、当然是到复制UE-jsp版的几个文件夹和JS文件进项目Web根目录下,将UE提供的几个jar包复制进lib目录并删除重复jar包
3、修改ueditor.config.js文件,修改相应配置
必选项
window.UEDITOR_HOME_URL:应用上下文路径
可选项:
autoFloatEnabled:是否浮动顶端工具栏
elementPathEnabled:是否显示底部的元素路径
initialFrameWidth:初始化编辑器宽度
initialFrameHeight:初始化编辑器高度
initialContent:初始化编辑器内容
toolbars:顶部工具栏
4、配置上传文件:修改jsp/config.json文件,以上传图片示例其他文件修改方式类似
imageUrlPrefix:应用上下文路径
imagePathFormat:图片保存路径格式
5、解决编辑器上传文件在线管理时图片显示错误问题(编辑器显示的是绝对路径)
A、删除ueditor-1.1.1.jar包中的com.baidu.ueditor.hunter.FileManager.class文件
B、在应用类路径下新建com.baidu.ueditor.hunter.FileManager.java,将删除的class文件反编译后复制进该文件,并修改getPath方法如下
private String getPath(File file) { String path = PathFormat.format(file.getAbsolutePath()); return path.replace(this.rootPath, "/"); }
6、解决前台代码不高亮显示
A、引入CSS文件
<link rel="stylesheet" href="ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
B、引入JS文件
<script type="text/javascript" src="ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
C、调用JS高亮显示
SyntaxHighlighter.all();
7、解决高亮显示撑破了页面,修改ueditor/third-party/SyntaxHighlighter/shCoreDefault.css文件
将
.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;
替换成
.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;word-break:break-all;
也就是在.syntaxhighlighter中增加
word-break:break-all;来自:http://my.oschina.net/harmel/blog/489100