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

原因

文章的末尾也说了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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

系统负载能力浅析

系统负载能力浅析 互联网时代,高并发是一个老生常谈的话题。无论对于一个web站点还是app应用,高峰时能承载的并发请求都是衡量一个系统性能的关键标志。像阿里双十...

32560
来自专栏菩提树下的杨过

Gradle 10分钟上手指南

java的源码构建工具,大致经历了 ant -> maven -> gradle 这个过程,每一次进步,都是在解决之前的工具所带来的问题,简单来说: 1. an...

213100
来自专栏黑白安全

iOS安全基础之钥匙串与哈希

本文最初是由Chris Lowe编写的,后来经过Ryan Ackermann(ios系统开发者)的修改,已经可以针对最新的Xcode 9.2,Swift 4,i...

12220
来自专栏Java帮帮-微信公众号-技术文章全总结

MQ消息中间件(工作+面试)

MQ消息中间件(工作+面试) ? AMQP协议介绍 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协...

1.1K70
来自专栏DevOps时代的专栏

15个私有云上的 DevOps 开源工具

在可维护性,可靠性,效率和安全性方面,DevOps 为私有云在改进操作流程方面发挥着重要的作用。私有云是一个由许多硬件和软件组件组成的复杂系统。 对于任何支持的...

60150
来自专栏架构师之路

秒杀系统架构优化思路

一、秒杀业务为什么难做 1)im系统,例如qq或者微博,每个人都读自己的数据(好友列表、群列表、个人信息); 2)微博系统,每个人读你关注的人的数据,一个人读多...

503100
来自专栏芋道源码1024

【追光者系列】HikariCP 连接池配多大合适(第一弹)?

首先声明一下观点:How big should HikariCP be? Not how big but rather how small!连接池的大小不是设置...

23500
来自专栏信安之路

【读者投稿】wifi渗透-狸猫换太子

上期作者发布了一篇关于wifi钓鱼的方法,今天我来给大佬们带来一篇关于拿到wifi密码能干什么?

18100
来自专栏影子

给Ionic写一个cordova(PhoneGap)插件

13240
来自专栏影子

给Ionic写一个cordova(PhoneGap)插件

501100

扫码关注云+社区

领取腾讯云代金券