Thinkphp+EasyUI Layout + kindeditor整合

最新推荐文章于 2022-02-16 19:11:36 发布

Link_增增

最新推荐文章于 2022-02-16 19:11:36 发布

阅读量3.6k

点赞数 2

本文链接：https://blog.csdn.net/link_zz/article/details/11474029

版权

这个EasyUI + kindeditor 整合可真让我费了一番周折啊，最后还是在EasyUI中文社区，经过大神的指导，才完成，在此谢过了。

head标签里面加载的文件如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../Public/Css/main.css"/>

<link rel="stylesheet" type="text/css" href="../Public/Css/easyui.css"/>
<link rel="stylesheet" type="text/css" href="../Public/Css/icon.css"/>
<script type="text/javascript" src="../Public/JS/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../Public/JS/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../Public/JS/easyui-lang-zh_CN.js"></script>

<link rel="stylesheet" type="text/css" href="../Public/kindeditor/themes/default/default.css"/>
<script type="text/javascript" src="../Public/kindeditor/kindeditor.js"></script>  
<script type="text/javascript" src="../Public/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript" src="../Public/kindeditor/ekindeditor.js"></script>

<script type="text/javascript" src="../Public/JS/common.js"></script>
<title>{:C('SITE_NAME')}</title>
</head>

其中

<script type="text/javascript" src="../Public/kindeditor/ekindeditor.js"></script>

ekindeditor.js是easyUI社区大神编写的，我拿来就用了。其内容如下：

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * Author : ____′↘夏悸
 * Easyui KindEditor的简单扩展.
 * 有了这个之后,你就可以像使用Easyui组件的方式使用KindEditor了
 * 前提是你需要导入KindEditor的核心js和相关样式. 本插件也需要在Easyui.min和KindEditor之后导入.
 * 呵呵..没做深入扩展了,简单实现了一下功能,架子已经搭好.有需要的筒子可以在这基础上扩展.
 **/
(function ($, K) {
	if (!K)
		throw "KindEditor未定义!";

	function create(target) {
		var opts = $.data(target, 'kindeditor').options;
		var editor = K.create(target, opts);
		$.data(target, 'kindeditor').options.editor = editor;
	}

	$.fn.kindeditor = function (options, param) {
		if (typeof options == 'string') {
			var method = $.fn.kindeditor.methods[options];
			if (method) {
				return method(this, param);
			}
		}
		options = options || {};
		return this.each(function () {
			var state = $.data(this, 'kindeditor');
			if (state) {
				$.extend(state.options, options);
			} else {
				state = $.data(this, 'kindeditor', {
						options : $.extend({}, $.fn.kindeditor.defaults, $.fn.kindeditor.parseOptions(this), options)
					});
			}
			create(this);
		});
	}

	$.fn.kindeditor.parseOptions = function (target) {
		return $.extend({}, $.parser.parseOptions(target, []));
	};

	$.fn.kindeditor.methods = {
		editor : function (jq) {
			return $.data(jq[0], 'kindeditor').options.editor;
		}
	};

	$.fn.kindeditor.defaults = {
		resizeType : 1,
		allowPreviewEmoticons : false,
		allowImageUpload : false,
		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', '|', 'image', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'],
		afterChange:function(){
			this.sync();//这个是必须的,如果你要覆盖afterChange事件的话,请记得最好把这句加上.
		}
	};
	$.parser.plugins.push("kindeditor");
})(jQuery, KindEditor);

html 里面直接像easyUI那样使用就行了，如下：
<textarea class="easyui-kindeditor" style="width:100%; height:400px;" ></textarea>

在此，再次感谢大神指导！

Link_增增

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Thinkphp+EasyUI Layout + kindeditor整合

这个EasyUI + kindeditor 整合可真让我费了一番周折啊，最后还是在EasyUI中文社区，经过大神的指导，才完成，在此谢过了。head标签里面加载的文件如下： {:C('SITE_NAME')}其中ekindeditor.js是easyUI社区大神编写的，我拿来就用了。其内容如下：/* * To change this
复制链接

扫一扫