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

原因

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

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

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

log

简介与比较

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

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

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

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

UEditor:

  • 功能更多
  • 样式更加清爽,显得朝气蓬勃
  • 用起来麻烦些
  • 坑比较多,不省心

KindEditor:

  • 功能中规中矩,相对UEditor来说可能少一些
  • 样式有些老气
  • 整合简单
  • 没有太多的坑,省心

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

整合和配置

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

  • 2.将静态文件放置到项目目录中
    p-k

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

    <!--引入引入kindeditor编辑器相关文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/kindeditor-4.1.10/themes/default/default.css"/>
    <script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/kindeditor-all.js"></script>
    <script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/lang/zh_CN.js"></script>
  • 4.在文章页面上创建id为editor的<textarea>元素,如下所示:
<textarea id="editor" style="width:600px;height:400px;visibility:hidden;">
</textarea>

//这里直接设置了宽高的值,另外一种方法是在KindEditor初始化时通过width属性设置。
  • 5.在文章页面创建KindEditor(参数都是可选的,根据实际需要进行设置即可):
<script type="text/javascript">
 $(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
            });
        });
    });
</script>
  • 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现在的菜单栏变成了这样:
nav

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

结语

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

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

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

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

posted @ 2017-12-01 08:29 涵s 阅读(...) 评论(...) 编辑 收藏