日常囉嗦

本來這一篇和接下來的幾篇是打算講一下JDBC和資料庫優化的，但是最近很多朋友加我好友也討論了一些問題，我發現大家似乎都是拿這個專案作為練手專案，作為腳手架來用的，因此呢，改變了一下思路，JDBC和資料庫優化這一塊兒延後一點再去說，先豐富一下專案的頁面和功能，因為現在的頁面實在有些少得可憐，所以我打算中間插入兩篇文章，給專案增加一個富文字編輯器的功能外掛，再增加一個圖片上傳的功能，把這個腳手架的內容再充實一下。
我的github地址，點這裡

初識富文字編輯器

先看兩張圖片：

1、這是一張普通的新聞詳情頁截圖

2、這是一張京東的商品詳情頁截圖

對於這種頁面大家都不陌生，翻新聞的時候經常是這種圖文並茂的圖片才能更好的吸引眼球，而商品詳情圖頁基本都是介紹資訊加商品的實景圖片才能更準確的吸引買家。
為什麼把這兩張圖片拿出來了呢？
這要談起往事了，我剛剛開始做開發的時候，有一次就負責開發這種類似的頁面，那個頁面叫新聞詳情，也是類似這種頁面的排版佈局，設計稿中的文字和圖片依次排開，很是美觀，我當時就鬧了個笑話，因為需要實現後端功能，我就開始思考，詳情表該怎麼設計呢？表結構是不是該這麼設計，主鍵+介紹資訊欄位+圖片欄位+介紹資訊欄位+圖片欄位….我把這個詳情全給拆開了，但是當我再看另一個設計稿的時候，我懵掉了，因為和第一張的排版不同，不是文字+圖片+…，而是圖片+圖片+文字…，我當時就不知道該怎麼做了，當時的心理活動是怎麼實際開發專案這麼難啊？已經萌生退意了，哈哈哈。
看到這裡，你可能知道我當時為什麼會被難住了，因為我不知道富文字編輯器的概念，也沒有用過類似的富文字編輯器，因此這個簡簡單單的需求被我想得太複雜了，其實很簡單的在表中設定一個欄位就可以了。
什麼是富文字編輯器？

富文字編輯器，是一種可內嵌於瀏覽器，所見即所得的文字編輯器。
富文字編輯器不同於文字編輯器(如textarea標籤、input標籤)，也可以叫做圖文編輯器，在富文字編輯器裡可以編輯非常豐富的內容，如文字、圖片、表情、程式碼……應有盡有，滿足你的大部分需求。
像一些新聞排版，基本是以圖文排版為主，而淘寶京東這些電商的商品詳情頁，基本都是多張已經排版好的設計圖拼接而來的，富文字編輯器可以很完美的支持者兩種需求。

UEditor簡介

富文字編輯器有很多，功能都是類似的，今天我要介紹的是UEditor，B公司開源的一款產品。
官網地址：http://ueditor.baidu.com/website/

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，想看實現效果自己下載到本地執行。

結語

這個整合過程應該是2015年的時候做的了，記得當時其實碰到了挺多問題的，也有挺多bug的，比如視窗覆蓋、無法初始化外掛等bug，當時的日記本丟了，因此現在有些記不太清晰了，反正當時是花了大概有一個星期才整合好，後面用在專案裡的次數也不多，因為有專門的前端來做頁面，文字編輯器也換掉了，因此也就沒太在意，差不多兩年沒有維護這個功能了。article頁面基本可以正常使用，如果還是有問題的話，可以找一下認識的前端朋友幫忙解決一下。