原因

在今年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仓库或者开源中国代码仓库中查看源码及项目文档。

easyUI整合富文本编辑器KindEditor详细教程(附源码)的更多相关文章

  1. Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合

    日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...

  2. 给web项目整合富文本编辑器

    给jsp页面整合富文本编辑器下载——删除多余的组件——加入到项目中——参照案例来完成整合步骤:1. 解压zip文件,将所有文件复制到Tomcat的webapps/kindeditor目录下. 2. 将 ...

  3. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  4. python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  5. 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传

    富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...

  6. PHP简单的长文章分页教程 附源码

    PHP简单的长文章分页教程 附源码.本文将content.txt里的内容分割成3页,这样浏览起来用户体验很好. 根据分页参数ipage,获取对应文章内容 include('page.class.php ...

  7. kindeditor富文本编辑器初步使用教程

    下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要FQ:或者直接CSDNhttp://download.csdn.net/downlo ...

  8. 关于EasyUI与富文本编辑器结合使用的问题(kindueditor与uueditor)

    最近使用easyui玩玩项目,在结合富文本编辑器时遇到了一些问题,很多人(在网上看到)集成富文本编辑器时常常不能显示, 第一次打开编辑的时候没有问题,但是第二次打开就出错了.为此我进行了一些调试研究. ...

  9. Django配置富文本编辑器kindeditor

    一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...

随机推荐

  1. “华尔街之狼”:ICO是“史上最大骗局”

    勘探船进村的那个夏季,父亲从城里带回了那把手电.手电的金属外壳镀了镍,看上去和摸起来一样冰凉.父亲进城以前采了两筐枸杞子,他用它们换回了那把锃亮的东西.父亲一个人哼着<十八摸>上路,鲜红透 ...

  2. HTML笔记<note1>

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Java Condition

    在Condition中,用await()替换wait(),用signal()替换notify(),用signalAll()替换notifyAll(),传统线程的通信方式,Condition都可以实现, ...

  4. 关于echarts、layer.js和jqGrid的知识点

    使用echarts和layer.js直接去官方文档,能解决大部分问题. 但是有些问题,解释不够清楚,在这里记录一下. 1.echarts的使用 第一点:关于echarts的labelline在数据为零 ...

  5. JAVA基础知识总结:三

    一.Java语句的执行结构 1.顺序语句 按照顺序从上往下依次执行的语句,中间没有任何的判断和跳转 2.分支语句 根据不同的条件来产生不同的分支 if语句.switch语句 3.循环语句 重复执行某句 ...

  6. 安利一波那个叫做 hutool 的通用工具类库

    摘自3.1.1版本作者发布原话,当时看到有点说不上的情绪,为作者的坚持.热爱点个赞. 已经想不起来是怎样结识 Hutool 的,但 Hutool 伴随几个项目的推进,获得了同事一致好评. 没经过实践和 ...

  7. cas单点登录如何获取更多信息

    现在有个新的系统(SpringMVC+Spring+Mybatis),我为它添加了一个单点登录功能.只是在本地客户端的web.xml文件里,添加了以下配置 <!-- 用于单点退出,该过滤器用于实 ...

  8. 【计算机网络】 一个小白的网络层学习笔记:总结下IP,NAT和DHCP

    前言:这篇文章是学习网络层协议时候总结的笔记,前面的主要部分介绍的都是IP协议, 后半部分介绍NAT协议和DHCP协议 参考书籍 <计算机网络-自顶向下>       作者 James F ...

  9. url 地址处理(截取,参数等)

    function hrefObj() { var localhref = window.location.href; var localarr = localhref.split('?')[1].sp ...

  10. python3 xpath数据获取案例

    import requestsfrom retrying import retryfrom lxml import etreeimport json class DaCheng(object): de ...