前言:
在web開發中, 富文本的編輯器真心很重要. 有電商店鋪的打理, 新聞稿/博客文章/論壇帖子的編輯等等, 這種所見即所的編輯方式, 大大方便了非技術人員從事互利網相關的工做.
由於手頭有個小項目, 正好涉及到這塊, 因此決心好好研究一番. 中間也在ckeditor和ueditor之間徘徊了好久, 後來聽聞大名鼎鼎的微信公衆號也使用了ueditor, 所以最後倒向了ueditor.
本文將講解如何集成springmvc+ueditor的一些要點, 並作下簡單的展望.javascript
ueditor簡介:
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具備輕量，可定製，注重用戶體驗等特色，開源基於MIT協議，容許自由使用和修改代碼...
ueditor的官網地址以下: http://ueditor.baidu.com/website/index.html.
因爲涉及到圖片上傳的部分, ueditor並不是純javascript版本, 其出了php, java, asp等語言的支持版本.
源碼的下載連接: http://ueditor.baidu.com/website/download.html.
集成:
ueditor的java版提供的是jsp版本的, 還附帶了多個java依賴包. 如下是它的目錄結構.
配置文件config.json, 定義了支持的上傳文件/圖片的接口, 以及限制, 這個很重要.
而當前的web開發, 每每都是基於maven來組織構建web工程的. 同時因爲springmvc版本的框架限制. 仍是得有一方進行妥協, 或者說是修改.
在這個的前提下, 咱們來進一步的地細化集成的工做.
• 依賴包採用maven的方式來組織構建
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!-- 上傳文件的支持 -->
<
dependency
>
<
groupId
>commons-fileupload</
groupId
>
<
artifactId
>commons-fileupload</
artifactId
>
<
version
>1.3.1</
version
>
</
dependency
>
<
dependency
>
<
groupId
>commons-io</
groupId
>
<
artifactId
>commons-io</
artifactId
>
<
version
>2.4</
version
>
</
dependency
>
<
dependency
>
<
groupId
>commons-codec</
groupId
>
<
artifactId
>commons-codec</
artifactId
>
<
version
>1.10</
version
>
</
dependency
>
<!-- org.json -->
<!--JSON is a light-weight, language independent, data interchange format. See http://www.JSON.org/-->
<
dependency
>
<
groupId
>org.json</
groupId
>
<
artifactId
>json</
artifactId
>
<
version
>20160212</
version
>
</
dependency
>
|
這樣就引入了文件上傳, 以及json序列化/反序列化處理的依賴包, ueditor-x.x.x.jar後面介紹.
• 資源訪問配置
單獨把ueditor放入到webapp目錄下, 所以在springmvc映射處理中須要排除.
|
1
|
<
mvc:resources
mapping="/ueditor/**" location="/ueditor/" />
|
• 引入ueditor-x.x.x的源碼
其實做爲依賴包引入也能夠, 只是引入源碼, 方便功能的修改和加強. 和前一種方法相比, 我更加推薦後者, 即引入源碼.
• 添加controller處理類
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
@Controller
@RequestMapping
(
"/ued"
)
public
class
UEditorController {
@RequestMapping
(value=
"/config"
)
public
void
config(HttpServletRequest request, HttpServletResponse response) {
response.setContentType(
"application/json"
);
String rootPath = request.getSession()
.getServletContext().getRealPath(
"/"
);
try
{
String exec =
new
ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
}
catch
(IOException e) {
e.printStackTrace();
}
}
}
|
該controller類照搬了ueditor中本來的controller.jsp的處理代碼, 並改爲springmvc的那種模式. 注意這邊的處理ueditor操做的url path爲: /ued/config. 它完成了編輯器初始化, 以及文件/圖片的上傳處理.
• 配置config.json文件
config.json文件, 是定義文件/圖片上傳的接口, 以及各類限制(文件大小上限, MimeType類型框定).
具體配置的細節並不重要, 這邊最重要的是: 放在那裏, 以及如何被讀取到?
放的位置問題, 能夠自由點, 讓咱們霸道一回, 就把config.json文件放置到webapp/conf目錄下吧, ^_^.
而後如何被讀取到呢? 原先ueditor的代碼, 默認指定了請求的Context Path. 緣由仍是在jsp版本中, 默認controller.jsp和config.json是同目錄.
|
1
2
3
|
private
String getConfigPath () {
return
this
.parentPath + File.separator + ConfigManager.configFileName;
}
|
然而現狀已經發生變化了, 若不修改源碼會致使找不到配置文件config.json的錯誤. 由於尋找的路徑和和咱們設定的webapp/conf有出路.
在類ConfigManager修改後爲:
|
1
2
3
4
5
|
private
String getConfigPath () {
return
this
.rootPath
+ File.separator +
"conf"
+ File.separator + ConfigManager.configFileName;
}
|
這樣就能夠了, 這也是爲何, 我推薦使用源碼引入的緣由, 這也是惟一一處必須須要修改的地方.
• 修改ueditor.config.js
這也是最後一個步驟了, 咱們須要制定編輯器訪問服務器的初始地址.
|
1
2
3
4
5
6
7
8
9
10
|
window.UEDITOR_CONFIG = {
//爲編輯器實例添加一個路徑，這個不能被註釋
UEDITOR_HOME_URL: URL
// 服務器統一請求接口路徑
// 原先默認的
//, serverUrl: URL + "jsp/controller.jsp"
// 修改後的
, serverUrl: "/ued/config"
|
注: 修改serverUrl, 使得其指向本身的服務器地址.
這樣整個ueditor和springmvc的集成配置工做就作完了, ^_^. 感受仍是有點趕鴨子上架, 卻沒有具體講述原理.
驗證:
驗證過程, 相對比較簡單一些.
引入編輯框代碼:
|
1
2
3
4
5
6
7
8
|
<script src=
"/ueditor/ueditor.config.js"
></script>
<script src=
"/ueditor/ueditor.all.min.js"
></script>
<script src=
"/ueditor/lang/zh-cn/zh-cn.js"
></script>
<script id=
"container"
name=
"content"
type=
"text/plain"
>這裏寫你的初始化內容</script>
<script type=
"text/javascript"
>
var editor = UE.getEditor(
'container'
);
</script>
|
初始化後, 編輯框以下:
上傳圖片操做後, 編輯框以下:
OK, 很是的成功.
後記:
在查閱網上資料的時候, 也見過其餘的集成方式的. 好比添加額外的servlet(path只匹配ueditor), 單獨處理ueditor的jsp. 這樣也能很好的作到集成, 也省心省力. 不過採用後者, 能夠修改圖片上傳的模式, 好比放置到專門的圖片服務器. 這也是服務作大的一個必經之路.
後續有機會將講述下使用ueditor+圖片服務器的修改思路, 以及ueditor的定製工做. 但願本身能努力, good good study, day day up.
公衆號&遊戲站點:
我的微信公衆號: 木目的H5遊戲世界
我的遊戲做品集站點(尚在建設中...): www.mmxfgame.com, 也可直接ip訪問: http://120.26.221.54/.