原因

在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合，从那时起，ssm项目中所使用的富文本编辑器都是UEditor。

文章的末尾也说了UEditor的一些坑：遮罩层问题，初始化和对象销毁的问题，图片上传配置，官方jar包也有问题(貌似官方在mavne仓库没有jar包)

虽然解决了大部分，不过用着依然不是很舒服，中间也想过换一个，但是本人实在有些懒，直到前几天才把另外一个富文本编辑器KindEditor整合进perfect-ssm项目里来。

简介与比较

KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。

这是KindEditor整合进perfect-ssm项目中的效果图:

这是之前的UEditor编辑器效果图:

虽然看上去差别不大，而且对于页面功能来说也没有特别大的改动，但是真正使用起来还是觉得KindEditor更加简便一些(这是个人观点)。

UEditor:

功能更多

样式更加清爽，显得朝气蓬勃

用起来麻烦些

坑比较多，不省心

KindEditor:

功能中规中矩，相对UEditor来说可能少一些

样式有些老气

整合简单

没有太多的坑，省心

为什么会有这个对比呢？是因为最近写一个项目的时候，试着在项目中整合了UEditor编辑器，它的功能虽然多，不过其中很大一部分基本用不到，而且这个玩意儿总是时不时的冒出来一个问题，再想想perfect-ssm项目整合了之后也有朋友会时不时的反馈一些问题，后来就直接弃掉换成了KindEditor，虽然功能不多，但是对于很多项目来说应该都足够了，而且用起来真的很省心，一次整合，再也不用做其他处理了。

整合和配置

1.首先下载KindEditor编辑器，使用的是4.1.10版本，下载地址：http://kindeditor.net/down.php

2.将静态文件放置到项目目录中

3.在文章页面引入KindEditor相关js文件：

4.在文章页面上创建id为editor的元素,如下所示：

//这里直接设置了宽高的值，另外一种方法是在KindEditor初始化时通过width属性设置。

5.在文章页面创建KindEditor(参数都是可选的，根据实际需要进行设置即可):

$(function () {

//详情编辑器

KindEditor.ready(function (K) {

this.editor

= K.create('textarea[id="editor"]', {

items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',

'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',

'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',

'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'multiimage',

'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',

'anchor', 'link', 'unlink'],

uploadJson: '/images',//指定上传图片的服务器端程序

fileManagerJson: '/images',//指定浏览远程图片的服务器端程序

allowFileManager: true

});

});

});

6.页面逻辑完善

添加文章时将编辑器中的内容赋值给文章的content属性：

function saveArticle() {

var title = $("#title").val();

var addName = $("#addName").val();

var content = editor.html();

var id = $("#articleIdfm").val();

var data = {"id": id, "articleTitle": title, "articleContent": content, "addName": addName}

...

...

修改文章时将编辑器中的内容修改为文章的content属性值：

function openArticleModifyDialog() {

...

...

editor.html(row.articleContent);

}

编辑框关闭时，将编辑器清空，不然会显示上一次的内容:

function resetValue() {

$("#title").val("");

editor.html();

...

...

}

7.后端接口功能完善

由于文章模块是开发好的功能，因此后端代码并没有改动，这次的修改只是增加了KindEditor，其他代码并没有做任何更改。

perfect-ssm现在的菜单栏变成了这样:

有兴趣的朋友可以去比较一下，我暂时先将KindEditor设置为推荐了。

结语

perfect-ssm项目中增加了一个富文本编辑器KindEditor，这个编辑器相比较于原来的UEditor更加容易整合，相比较UEditor而言的话，KindEditor的问题和坑少一些，不过呢，类似的编辑器还是很多的，选择适合自己的就好。

首发于我的个人博客，项目演示地址：perfect-ssm,登录账号：admin,密码：123456

如果有问题或者有一些好的创意，欢迎给我留言，也感谢向我指出项目中存在问题的朋友。