jsp 页面引入easyui 和kindeditor 文件
kindeditor 文件:
<link rel="stylesheet" href="../resources/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="../resources/kindeditor/plugins/code/prettify.css" />
<script language="javascript" type="text/javascript" src="../resources/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../resources/kindeditor/plugins/code/prettify.js"></script>
然后把kindeditor当做easyui 插件整合
整合代码为:
(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 : 0,
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();//这个是必须的,如果你要覆盖afterChange事件的话,请记得最好把这句加上.
}
};
$.parser.plugins.push("kindeditor");
})(jQuery, KindEditor);
最后再textarea 标签class属性设置为easyui-kindeditor即可,例如 :
<td style="vertical-align: top;text-align: right">新闻内容:</td>
<td><textarea class="easyui-kindeditor" name="content" style="width:600px;height:400px;resize:none"></textarea></td>
注:
1.可将整合代码单独写一个js文件:例如 easyui-kindeditor.js
让后在jsp文件引入即可,例如:<script type="text/javascript" src="./js/easyui-kindeditor.js"></script>
2.保存数据库时包含html代码实际长度大于输入字数,内容格式也将保存,显示时格式也能体现。
相关推荐
html编辑器 需要easyui的支持
spring-boot-easyui-kindeditor 整合源码
SpringMVC+mybatis+easyui+百度富文本编辑器+easyui三级弹窗+shiro权限框架
自定义easyui datagrid的行编辑器,实现颜色选择。 依赖类库版本; jquery-1.8.0.js jquery-easyui-1.3.1
SpringMVC +easyui+百度富文本编辑器+easyui三级弹窗
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
【easyui】kindeditor富文本(html编辑器)的使用-附件资源
easyui 日期选择器
EasyUI分页,编辑
自己整理的ssm+easyUI整合案列(紫薯紫薯紫薯紫薯紫薯)
easyUI行内可编辑,点击表格内部任意一格,即可修改其内容
easyui 整合 easyui学习资料 easyui 整合 easyui学习资料 值得收藏
jQuery EasyUI与Struts2 的整合—属性驱动篇 如果你是用模型驱动,或者是直接把属性写在action里面,你不会碰到我遇到的那么多问题。 但是你用模型驱动好吗,如果一个页面需要处理多个对象的时候怎么办。 如果你...
通过springMvc+easyui+ueditor实现富文本添加修改删除等功能
easyUI拓展:获取当前datagrid中在编辑状态的行编号列表,直接使用即可
jQuery EasyUI与Struts2 的整合—属性驱动篇
KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的...
详细代码展现了如何在Easyui中使用DataGrid的单元格的编辑功能并扩展
修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...