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 */
之後在運行測試,發現真正的成功了。