百度富文本ueditor使用 以及 與 Struts2 整合時出現的問題解決

1.HTML 環境搭建

百度富文本下載地址

http://ueditor.baidu.com/website/download.html

解壓完成之後的目錄(沒有demo.html)


根據官方文檔說明可以創建一個demo.html 

也可以直接修改index.html 來進行開發

創建一個富文本框的最簡代碼爲

 <!-- 加載編輯器的容器 -->
    <script id="container" name="content" type="text/plain">
        這裏寫你的初始化內容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 編輯器源碼文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 實例化編輯器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>

放在網頁中即可顯示


二。jsp環境搭建
上面說的都是html 的
現在來說說 在jsp項目中的使用。
將下載的文件放在wen項目的 webRoot 下
(這時候使用富文本框的時候要注意一下js文件的引用路徑)
注意:
jsp文件夾下面有一個lib包,裏面存放了需要用到的jar包
將這些jar包放置在WEB-INF/lib的目錄下
如果使用maven 管理項目的話,因爲maven遠程倉庫跟本地倉庫都是沒有 ueditor 的jar的,所以需要手動配置添加到本地倉庫
三。與Struts2 整合,
經過上面的步驟,我相信大家一定已經成功將富文本框顯示出來了。
效果是這樣的
但是如果有人的項目中使用了Struts來封裝 servlet 一定就發現了一些問題
沒錯    圖片附件之類的沒法上傳


找不到文件的數據
這是因爲 Struts2中有實現好的文件上傳功能,攔截器會攔截文件上傳的請求然後使用默認的文件上傳功能。這樣ueditor的文件上傳就沒法接收到請求,接收不到文件的數據
解決方法:在Struts.xml中添加配置項,屏蔽到對ueditor請求的攔截
 

<constant name="struts.action.excludePattern" value="/ueditor/.*" />

value裏面放置的是文件路徑


,重啓項目之後文件可以上傳成功了,但是立刻又發現文件無法正常的在富文本框中顯示出來。
點擊左上角的html可以直接看到源碼,會發現文件的路徑不對。
這是因爲在config.json 下面系統有一個默認路徑

* 前後端通信相關的配置,註釋只允許使用多行方式 */
{
    /* 上傳圖片配置項 */
    "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
    "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
    "imageMaxSize": 2048000, /* 上傳大小限制,單位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
    "imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
    "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
    "imageInsertAlign": "none", /* 插入的圖片浮動方式 */
    "imageUrlPrefix": "", /* 圖片訪問路徑前綴 */
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
                                /* {filename} 會替換成原文件名,配置這項需要注意中文亂碼問題 */
                                /* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
                                /* {time} 會替換成時間戳 */
                                /* {yyyy} 會替換成四位年份 */
                                /* {yy} 會替換成兩位年份 */
                                /* {mm} 會替換成兩位月份 */
                                /* {dd} 會替換成兩位日期 */
                                /* {hh} 會替換成兩位小時 */
                                /* {ii} 會替換成兩位分鐘 */
                                /* {ss} 會替換成兩位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */


重點關注 imageUrlPrefix  和   imagePathFormat
imageUrlPrefix 中配置項目名
imagePathFormat 中配置文件需要保存的路徑
修改如下:

 /* 上傳圖片配置項 */
    "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
    "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
    "imageMaxSize": 2048000, /* 上傳大小限制,單位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
    "imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
    "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
    "imageInsertAlign": "none", /* 插入的圖片浮動方式 */
    "imageUrlPrefix": "/newschange/", /* 圖片訪問路徑前綴 */
    "imagePathFormat": "/ueditor/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
                                /* {filename} 會替換成原文件名,配置這項需要注意中文亂碼問題 */
                                /* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
                                /* {time} 會替換成時間戳 */
                                /* {yyyy} 會替換成四位年份 */
                                /* {yy} 會替換成兩位年份 */
                                /* {mm} 會替換成兩位月份 */
                                /* {dd} 會替換成兩位日期 */
                                /* {hh} 會替換成兩位小時 */
                                /* {ii} 會替換成兩位分鐘 */
                                /* {ss} 會替換成兩位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */


之後在運行測試,發現真正的成功了。



發佈了72 篇原創文章 · 獲贊 12 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章