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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/isscollege/article/details/84553047

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

  1. kindeditor单独页面使用时,先引入jquery,这里我引用的是easyui带的,本身kindeditor4支持jquery到3.X版本
<script src="${pageContext.servletContext.contextPath}/js/jquery.min.js"
	type="text/javascript"></script>
  1. 引入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>
  1. 最后引入一下中文语言包,让界面和提示变中文
<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>
  1. 单独访问时显示效果如下

在这里插入图片描述

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

在这里插入图片描述

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

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

  1. 几个原因,首先因为easyui的tabs是通过ajax动态加载页面的代码片段进来的。代码片段指的是body里的不含body标签和外面的标记,所以写在外面的js和引用不能生效,移动到body里。
    其次,首页里已经包含了jquery的 初始化操作,这里富文本编辑器的实例化改为(不要的注释掉了)
		/* KindEditor.ready(function(K) { */
			editor = KindEditor.create('#editor_id', options);
		/* }); */
  1. 然后,就可以正常访问了

在这里插入图片描述

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

展开阅读全文

没有更多推荐了,返回首页