将百度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包

页面中引入如下几个文件

<script type="text/javascript" src="js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="js/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" src="js/ueditor/lang/zh-cn/zh-cn.js"></script>

3、修改ueditor.config.js文件修改相应配置

必选项

window.UEDITOR_HOME_URL：应用上下文路径

可选项：

autoFloatEnabled：是否浮动顶端工具栏

elementPathEnabled：是否显示底部的元素路径

initialFrameWidth：初始化编辑器宽度

initialFrameHeight：初始化编辑器高度

initialContent：初始化编辑器内容

toolbars：顶部工具栏

也可在实例化编辑器时修改，如

var ue = UE.getEditor("textAreaID",{
    initialFrameWidth : 480,
    initialFrameHeight : 600
})

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;

8、常用API

var ue = UE.getEditor("textAreaID");
// 获得编辑器内容：纯文本
ue.getContextTxt();
// 获得编辑器内容：带格式的纯文本
ue.getPlainTxt();
// 获得编辑器内容：带HTML标签
ue.getContext();
// 判断是否有内容
ue.hasContents();

来源：oschina

链接：https://my.oschina.net/u/2427367/blog/489100

标签

Ueditor

编辑器

ueditor编辑器