将百度UEditor集成进SSH2项目中

jopen 9年前

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包

将百度UEditor集成进SSH2项目中

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