首页 > 代码库 > easyui编辑器(kindeditor-4.1.10)
easyui编辑器(kindeditor-4.1.10)
//1 重写kindedit -建一个js文件 easyui_kindeditor.js
(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,
uploadJson : ‘${ctx}/wxMessage/uploadImg.yhtml‘,
fileManagerJson : ‘${ctx}/wxMessage/uploadImg.yhtml‘,
items : [
‘fontname‘, ‘fontsize‘, ‘|‘, ‘textcolor‘, ‘bgcolor‘, ‘bold‘, ‘italic‘, ‘underline‘,
‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,
‘insertunorderedlist‘, ‘|‘, ‘emoticons‘, ‘image‘, ‘link‘,‘fullscreen‘,‘wordpaste‘,‘source‘],
afterChange:function(){
this.sync();//这个是必须的,假设你要覆盖afterChange事件的话,请记得最好把这句加上.
}
};
$.parser.plugins.push("kindeditor");
})(jQuery, KindEditor);
//2 在页面引入 必要的文件 ——kindeditor-4.1.10能够在官方上下载到
<link href="http://www.mamicode.com/kindeditor-4.1.10/examples/index.css" rel="stylesheet" />
<script src="http://www.mamicode.com/kindeditor-4.1.10/kindeditor.js"></script>
<script src="http://www.mamicode.com/kindeditor-4.1.10/kindeditor-all.js"></script>
<script src="http://www.mamicode.com/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script src="http://www.mamicode.com/kindeditor-4.1.10/kindeditor-min.js"></script>
<script src="http://www.mamicode.com/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript"
src="http://www.mamicode.com//js/easyui_kindeditor.js"></script>
// 3 页面上用
<input id="content" name="content" class="easyui-kindeditor" style="width: 90%; height: 140px;visibility: hidden;" options="validType:‘length[0,500]‘" />
//编辑器
<script type="text/javascript">
var editor;
KindEditor.ready(function (K) {
editor = K.create(‘textarea[name="content"]‘, {
allowFileManager: true,
resizeType: 1,
allowPreviewEmoticons: false,
items: [
‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘,
‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,
‘insertunorderedlist‘, ‘|‘, ‘emoticons‘, ‘image‘, ‘link‘]
});
});
</script>
// 4 dataGrid 改动时 赋值 编辑框仅仅能手动赋值 row-选中行的数据 content 编辑器id 填充内容row.content KindEditor是我们上面重写kindedit是定义的名字
function editWxSendMessage(row){
$("#win").window(‘open‘);
$("#wxsendmessageInfoForm").form(‘clear‘);
$("#wxsendmessageInfoForm").form("load", row);
KindEditor.html(‘#content‘, row.content);
}
easyui编辑器(kindeditor-4.1.10)