easyUI整合富文本编辑器KindEditor详细教程(附源码)

原因

在今年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的</code>元素,如下所示：</li> </ul> <pre><code><textarea id="editor" style="width:600px;height:400px;visibility:hidden;"> //这里直接设置了宽高的值，另外一种方法是在KindEditor初始化时通过width属性设置。
  • 5.在文章页面创建KindEditor(参数都是可选的，根据实际需要进行设置即可):
  • 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
  
  如果有问题或者有一些好的创意，欢迎给我留言，也感谢向我指出项目中存在问题的朋友。

  如果你想继续了解该项目可以查看整个系列文章Spring+SpringMVC+MyBatis+easyUI整合系列文章,也可以到我的GitHub仓库或者开源中国代码仓库中查看源码及项目文档。

转载于:https://www.cnblogs.com/han-1034683568/p/7930542.html