easyUI和kindeditor的整合以及兼容问题处理

最新推荐文章于 2026-05-08 07:22:28 发布

原创最新推荐文章于 2026-05-08 07:22:28 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

java 同时被 3 个专栏收录

32 篇文章

订阅专栏

网页设计

7 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文介绍了如何将easyUI框架与kindeditor富文本编辑器进行整合，并解决两者结合时出现的兼容性问题。在整合过程中，需要注意由于easyUI的tabs通过ajax动态加载，导致外部js和引用无法生效，需要将相关脚本移动到body内部，并调整kindeditor的初始化方式以确保正常运行。

easyUI应用还是比较广泛的，可以较快速设计出一般的管理平台页面。
kindeditor也是一个比较老牌的富文本编辑器，虽然16年后没再更新了，但能满足绝大多数的需求。
但两者整合时还是会有一些兼容性问题，每次我都忘，网上也查不到，刚好写出来备忘。

kindeditor单独页面使用时，先引入jquery，这里我引用的是easyui带的，本身kindeditor4支持jquery到3.X版本

<script src="${pageContext.servletContext.contextPath}/js/jquery.min.js"
	type="text/javascript"></script>

引入kindeditor所需的哦js和样式

<link rel="stylesheet"
	href="${pageContext.servletContext.contextPath}/js/editor/themes/default/default.css" />
<script charset="utf-8"
	src="${pageContext.servletContext.contextPath}/js/editor/kindeditor-all-min.js"></script>

最后引入一下中文语言包，让界面和提示变中文

<script charset="utf-8"
	src="${pageContext.servletContext.contextPath}/js/editor/lang/zh-CN.js"></script>

这里实例化富文本编辑器

<script type="text/javascript">
		$(function(e) {
			var editor;
			var options = {
				allowFileManager : true,
				uploadJson : '${pageContext.servletContext.contextPath}/upload.action',
				filePostName : 'file',
				afterUpload : function(data) {
					alert(data);
				},
				urlType : 'absolute'
			};
			//editor_id要替换成富文本编辑器的组件id
			KindEditor.ready(function(K) {
				window.editor = KindEditor.create('#editor_id');				
			});
			</script>

单独访问时显示效果如下

在这里插入图片描述

下面是easyui的大致后台页面，用的layout布局，中间是tabs选项卡

在这里插入图片描述

点击包含富文本编辑器的页面

在这里插入图片描述
对，就这样子了，不能初始化，不报错、不显示，头大。

几个原因，首先因为easyui的tabs是通过ajax动态加载页面的代码片段进来的。代码片段指的是body里的不含body标签和外面的标记，所以写在外面的js和引用不能生效，移动到body里。
其次，首页里已经包含了jquery的初始化操作，这里富文本编辑器的实例化改为（不要的注释掉了）

		/* KindEditor.ready(function(K) { */
			editor = KindEditor.create('#editor_id', options);
		/* }); */

然后，就可以正常访问了

在这里插入图片描述

同志们，可以试试了
Created by 薛萌
这里写图片描述