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

2023-03-12 20:36:28

原因

在今年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文件：

    <!--引入引入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现在的菜单栏变成了这样:

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

结语

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

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

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

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

码农公寓

原因

简介与比较

整合和配置

结语

相关文章