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

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

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

  1. 引入kindeditor所需的哦js和样式


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

这里实例化富文本编辑器


  1. 单独访问时显示效果如下

easyUI和kindeditor的整合以及兼容问题处理_第1张图片

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

easyUI和kindeditor的整合以及兼容问题处理_第2张图片

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

easyUI和kindeditor的整合以及兼容问题处理_第3张图片
对,就这样子了,不能初始化,不报错、不显示,头大。

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

easyUI和kindeditor的整合以及兼容问题处理_第4张图片

同志们,可以试试了
Created by 薛萌
easyUI和kindeditor的整合以及兼容问题处理_第5张图片

你可能感兴趣的:(java,网页设计,html,bootstrap4.0,json)