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页面基本能够正常使用，若是仍是有问题的话，能够找一下认识的前端朋友帮忙解决一下。