[转载]关于JqueryEasyUI集合Kindeditor – 田园里的蟋蟀 – 博客园.
写在前面
上一篇《初试JqueryEasyUI(附Demo)》;
在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor、ueditor、kindeditor、eWebEditor等,其实最早接触的是ckeditor(fckeditor),用着功能确实不错,但是感觉太复杂了,而且东西也比较大,不是很方便,ueditor是百度出品的,但是用过kindeditor之后发现感觉还是kindeditor比较好用点,个人感觉,勿喷!
kindeditor的示例也是比较全的,而且兼容性也比较好,就用它试着集合easyui了。
实现
因本人js技术有限,试了好久也没搞好,此处略去十万个字。。。
网上找到一段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, items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link'], afterChange:function(){ this.sync(); } }; $.parser.plugins.push("kindeditor"); })(jQuery, KindEditor);
需要同时引用easyui和kindeditor相关样式和脚本,然后就可以像使用easyui组件一样使用kindeditor:
<textarea class="easyui-kindeditor" id="easyui_ditor" style="width: 100%; height: 200px; visibility: hidden;" name="easyui_ditor">EasyUI集合KindEditor</textarea>
如果你使用的是后台获取设置kindeditor值的话可以使用这个,但是js获取或设置文本框值,上面就不好实现,也试了很多方法没有解决,有关js的大神如果知道方法还请赐教。
注意创建kindeditor的时候有个afterChange事件,表示更改编辑器的内容发生的事件,这边需要重写下。其实kindeditor不集合到easyui中也是可以使用,只不过没有上面这样创建方便,做了个示例,大家可以看下:
easyui-kindeditor编辑器:<textarea class="easyui-kindeditor" id="easyui_ditor" style="width: 100%; height: 200px; visibility: hidden;" name="easyui_ditor">EasyUI集合KindEditor</textarea> <a class="easyui-linkbutton" onclick="" href="javascript:void(0)">设置</a> <a class="easyui-linkbutton" onclick="alert(KindEditor.html())" href="javascript:void(0)">获取</a>kindeditor编辑器:<textarea id="txtContent" style="width: 100%; height: 200px; visibility: hidden;" name="txtContent">KindEditor</textarea> <a class="easyui-linkbutton" onclick="editor.html('我在设置KindEditor内容');" href="javascript:void(0)">设置</a> <a class="easyui-linkbutton" onclick="alert(editor.html())" href="javascript:void(0)">获取</a>
js代码:
//编辑器 var editor; KindEditor.ready(function (K) { editor = K.create('textarea[name="txtContent"]', { allowFileManager: true, resizeType: 1, allowPreviewEmoticons: false, items: [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link'] }); });
效果:
完整示例Demo下载:http://pan.baidu.com/s/1c0zP6KC