(编辑器)Jquery-EasyUI集合Kindeditor编辑器
1.在html里面添加
list.html
list.html (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(); }, afterBlur: function () { this.sync(); } }; $.parser.plugins.push("kindeditor"); })(jQuery, KindEditor);
2.需要同时引用easyui和kindeditor相关样式和脚本,然后就可以像使用easyui组件一样使用kindeditor:
<link href="kindeditor-4.1.10/examples/index.css" rel="stylesheet" /> <script src="kindeditor-4.1.10/kindeditor.js"></script> <script src="kindeditor-4.1.10/kindeditor-all.js"></script> <script src="kindeditor-4.1.10/kindeditor-all-min.js"></script> <script src="kindeditor-4.1.10/kindeditor-min.js"></script> <script src="kindeditor-4.1.10/lang/zh_CN.js"></script>
调用方法:
<textarea name="easyui_ditor" id="easyui_ditor" class="easyui-kindeditor" style="width: 90%; height: 140px; visibility: hidden;">KindEditor</textarea>
3.360浏览器不兼容,firefox浏览器正常,所以赋值方法
KE.html(id, val)
设置编辑器的HTML内容。
参数:
id:String,编辑器的ID
val: String,HTML字符串
返回值:无
页面只有一个编辑器的话最新版本这样写就可以。
KindEditor.html('#txtIntroduce', data.Introduce);
loadFilter: function (data) { $.post("../Action/newsList.ashx", { content: $('#easyui_ditor').val() }, function (data) { var json = eval("(" + data + ")"); //alert(json.news[0].Content) //$('#easyui_ditor').val(json.news[0].Content); KindEditor.html($('#easyui_ditor'), json.news[0].Content); //console.info($('#easyui_ditor').val()); });
作者:【唐】三三
出处:https://www.cnblogs.com/tangge/p/3830737.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
分类:
Web - jQuery
, Web - EasyUI
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
2013-07-08 jQuery - 2.jQuery选择器
2013-07-08 jQuery - 1.简单的JQuery