前言
本來這一篇和接下來的幾篇是打算講一下JDBC和數據庫優化的,但是最近很多朋友加我好友也討論了一些問題,我發現大家似乎都是拿這個項目作為練手項目,作為腳手架來用的,因此呢,改變了一下思路,JDBC和數據庫優化這一塊兒延后一點再去說,先豐富一下項目的頁面和功能,因為現在的頁面實在有些少得可憐,所以我打算中間插入兩篇文章,給項目增加一個富文本編輯器的功能插件,再增加一個圖片上傳的功能,把這個腳手架的內容再充實一下。
我的github地址,點這里
初識富文本編輯器
先看兩張圖片:
1、這是一張普通的新聞詳情頁截圖
2、這是一張京東的商品詳情頁截圖
對於這種頁面大家都不陌生,翻新聞的時候經常是這種圖文並茂的圖片才能更好的吸引眼球,而商品詳情圖頁基本都是介紹信息加商品的實景圖片才能更准確的吸引買家。
為什么把這兩張圖片拿出來了呢?
這要談起往事了,我剛剛開始做開發的時候,有一次就負責開發這種類似的頁面,那個頁面叫新聞詳情,也是類似這種頁面的排版布局,設計稿中的文字和圖片依次排開,很是美觀,我當時就鬧了個笑話,因為需要實現后端功能,我就開始思考,詳情表該怎么設計呢?表結構是不是該這么設計,主鍵+介紹信息字段+圖片字段+介紹信息字段+圖片字段....我把這個詳情全給拆開了,但是當我再看另一個設計稿的時候,我懵掉了,因為和第一張的排版不同,不是文字+圖片+...,而是圖片+圖片+文字...,我當時就不知道該怎么做了,當時的心理活動是怎么實際開發項目這么難啊?已經萌生退意了,哈哈哈。
看到這里,你可能知道我當時為什么會被難住了,因為我不知道富文本編輯器的概念,也沒有用過類似的富文本編輯器,因此這個簡簡單單的需求被我想得太復雜了,其實很簡單的在表中設置一個字段就可以了。
什么是富文本編輯器?
富文本編輯器,是一種可內嵌於瀏覽器,所見即所得的文本編輯器。
富文本編輯器不同於文本編輯器(如textarea標簽、input標簽),也可以叫做圖文編輯器,在富文本編輯器里可以編輯非常豐富的內容,如文字、圖片、表情、代碼......應有盡有,滿足你的大部分需求。
像一些新聞排版,基本是以圖文排版為主,而淘寶京東這些電商的商品詳情頁,基本都是多張已經排版好的設計圖拼接而來的,富文本編輯器可以很完美的支持者兩種需求。
UEditor簡介
富文本編輯器有很多,功能都是類似的,今天我要介紹的是UEditor,B公司開源的一款產品。
官網地址:http://ueditor.baidu.com/website/
完整的功能演示,可以參考:http://ueditor.baidu.com/website/onlinedemo.html
它外觀是這樣的:
UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文本web編輯器,具有輕量,可定制,注重用戶體驗等特點,開源基於MIT協議,允許自由使用和修改代碼。
大家可以到官網去體驗一下,順便試試效果,今天我的主要任務就是把它放到jsp頁面中,實現easyUI與UEditor的整合。
easyUI與UEditor的整合
pom文件修改,新增jar包。
<!-- Start: 百度UEditor所需的jar包 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160810</version>
</dependency>
<dependency>
<groupId>com.baidu.ueditor</groupId>
<artifactId>ueditor</artifactId>
<version>20160310</version>
</dependency>
<!-- End: 百度UEditor所需的jar包 -->
新增aticle.jsp頁面,設計表結構並實現前后端功能。
CREATE TABLE `ssm_article` (
`articleID` int(4) NOT NULL AUTO_INCREMENT,
`articleTitle` varchar(100) COLLATE utf8_bin DEFAULT NULL,
`articleCreateDate` varchar(50) COLLATE utf8_bin DEFAULT NULL,
`articleContent` longtext COLLATE utf8_bin,
`articleclassID` int(4) DEFAULT NULL,
`istop` int(4) DEFAULT NULL,
`addname` varchar(50) COLLATE utf8_bin DEFAULT NULL,
PRIMARY KEY (`articleID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
添加UEditor數據文件,開始與easyUI整合。
相關設置,UEditor中圖片上傳目錄的設置。
"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}",
//為編輯器實例添加一個路徑,這個不能被注釋
UEDITOR_HOME_URL: URL
// 服務器統一請求接口路徑
, serverUrl: URL + "jsp/controller.jsp"
代碼已經上傳到github,想看實現效果自己下載到本地運行。
結語
推薦一下自己的達人課,感興趣的朋友可以看一下:SSM搭建精美實用的管理系統
2017年12月1日,項目中再次增加了一個富文本編輯器KindEditor,也推薦大家使用一下,easyUI整合富文本編輯器KindEditor詳細教程(附源碼)。
這個整合過程應該是2015年的時候做的了,記得當時其實碰到了挺多問題的,也有挺多bug的,比如窗口覆蓋、無法初始化插件等bug,當時的日記本丟了,因此現在有些記不太清晰了,反正當時是花了大概有一個星期才整合好,后面用在項目里的次數也不多,因為有專門的前端來做頁面,文本編輯器也換掉了,因此也就沒太在意,差不多兩年沒有維護這個功能了。article頁面基本可以正常使用,如果還是有問題的話,可以找一下認識的前端朋友幫忙解決一下。