Spring+SpringMVC+MyBatis+easyUI整合優化篇（六）easyUI與富文本編輯器UEditor整合

前言

原本這一篇和接下來的幾篇是打算講一下JDBC和數據庫優化的，可是最近不少朋友加我好友也討論了一些問題，我發現你們彷佛都是拿這個項目做爲練手項目，做爲腳手架來用的，所以呢，改變了一下思路，JDBC和數據庫優化這一起延後一點再去說，先豐富一下項目的頁面和功能，由於如今的頁面實在有些少得可憐，因此我打算中間插入兩篇文章，給項目增長一個富文本編輯器的功能插件，再增長一個圖片上傳的功能，把這個腳手架的內容再充實一下。
個人github地址，點這裏

初識富文本編輯器

先看兩張圖片：

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

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

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

富文本編輯器，是一種可內嵌於瀏覽器，所見即所得的文本編輯器。
富文本編輯器不一樣於文本編輯器(如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頁面基本能夠正常使用，若是仍是有問題的話，能夠找一下認識的前端朋友幫忙解決一下。