这个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>
在此,再次感谢大神指导!