將百度UEditor集成進SSH2項目中

一、爲了讓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>

二、固然是到複製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>

三、修改ueditor.config.js文件修改相應配置

必選項

window.UEDITOR_HOME_URL：應用上下文路徑

可選項：

autoFloatEnabled：是否浮動頂端工具欄

elementPathEnabled：是否顯示底部的元素路徑

initialFrameWidth：初始化編輯器寬度

initialFrameHeight：初始化編輯器高度

initialContent：初始化編輯器內容

toolbars：頂部工具欄

也可在實例化編輯器時修改，如

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

四、配置上傳文件：修改jsp/config.json文件，以上傳圖片示例其餘文件修改方式相似

imageUrlPrefix：應用上下文路徑

imagePathFormat：圖片保存路徑格式

五、解決編輯器上傳文件在線管理時圖片顯示錯誤問題（編輯器顯示的是絕對路徑）

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, "/");
}

六、解決前臺代碼不高亮顯示

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();

七、解決高亮顯示撐破了頁面，修改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;

八、經常使用API

var ue = UE.getEditor("textAreaID");
// 得到編輯器內容：純文本
ue.getContextTxt();
// 得到編輯器內容：帶格式的純文本
ue.getPlainTxt();
// 得到編輯器內容：帶HTML標籤
ue.getContext();
// 判斷是否有內容
ue.hasContents();