`

easyui kindeditor 文本编辑器整合

阅读更多

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代码实际长度大于输入字数,内容格式也将保存,显示时格式也能体现。

 

分享到:
评论

相关推荐

    easyui_kindeditor.js

    html编辑器 需要easyui的支持

    【easyui】kindeditor富文本(html编辑器)的使用-附件资源

    【easyui】kindeditor富文本(html编辑器)的使用-附件资源

    spring-boot-easyui-kindeditor整合源码

    在本文中,我们将深入探讨如何将Spring Boot、EasyUI和KindEditor这三者进行整合,以便在基于Spring Boot的应用程序中实现一个功能丰富的富文本编辑器。Spring Boot是Java领域中一个快速开发框架,它简化了Spring...

    SpringMVC+mybatis+easyui+百度富文本编辑器+easyui三级弹窗+shiro权限框架

    综上所述,这个项目结合了SpringMVC的MVC架构,MyBatis的持久层处理,EasyUI的界面设计,UEditor的富文本编辑,以及EasyUI的三级弹窗效果,以及Shiro的安全管理,共同构建了一个功能全面、易于维护的企业级Web应用。...

    easyui datagrid 自定义编辑器 colorpickerEditor

    在本文中,我们将深入探讨如何在EasyUI的DataGrid中创建自定义编辑器,特别是`colorpickerEditor`,用于在行内编辑时选择颜色。EasyUI是一个基于jQuery的UI库,它提供了丰富的组件,如DataGrid,使得网页开发更加...

    SpringMVC +easyui+百度富文本编辑器+easyui三级弹窗+shiro权限框架

    本项目结合了SpringMVC、EasyUI、百度富文本编辑器以及EasyUI的三级弹窗功能,并利用Shiro进行权限管理,创建了一个功能完善的系统框架。下面将详细介绍这些技术及其在项目中的应用。 **SpringMVC** SpringMVC是...

    springMvc+easyui+ueditor例子

    总的来说,"springMvc+easyui+ueditor例子"展示了如何整合这些技术来创建一个功能全面的Web应用,实现了对富文本内容的管理,对于学习和理解前后端交互、MVC架构以及富文本编辑器的使用具有很好的参考价值。...

    easyui datagrid在编辑状态下更新列的值

    在标题“easyui datagrid在编辑状态下更新列的值”中,我们关注的是如何在Datagrid的编辑模式下动态地修改列的值,以及确保在编辑结束后,保存的数据反映这些变更。以下将详细介绍这一过程。 首先,EasyUI的...

    ssm+easyUI整合案列

    SSM+EasyUI整合案例是将Spring、SpringMVC和MyBatis这三大Java Web开发框架与EasyUI前端组件库结合使用的一个实践项目。这个整合案例可以帮助开发者更好地理解和掌握这四大技术的协同工作,提高开发效率,打造用户...

    easyui 日期选择器

    EasyUI 提供了一些事件来监听日期选择器的操作,如`onOpen`(打开日期选择器时触发)、`onClose`(关闭日期选择器时触发)等。开发者可以根据需求编写相应的事件处理函数。 ```html &lt;input type="text" class="...

    easyUI行内可编辑

    8. **样式和自定义**:EasyUI 允许我们自定义编辑器的样式和行为,例如添加验证规则、禁用某些字段的编辑等。 9. **数据同步**:为了保持前端和后端数据的一致性,每次编辑完成后,都需要与服务器进行通信。这可能...

    EasyUI分页,编辑

    这个主题涉及到的是 EasyUI 的两个核心功能:分页和编辑。在 Web 应用程序中,分页通常用于处理大量数据,提高用户体验,而编辑功能则允许用户对展示的数据进行增删改操作。下面我们将深入探讨这两个方面。 ### 1. ...

    jQuery EasyUI与Struts2的整合—属性驱动篇

    jQuery EasyUI与Struts2 的整合—属性驱动篇 如果你是用模型驱动,或者是直接把属性写在action里面,你不会碰到我遇到的那么多问题。 但是你用模型驱动好吗,如果一个页面需要处理多个对象的时候怎么办。 如果你...

    easyUI拓展:获取当前datagrid正在编辑状态的行编号

    easyUI拓展:获取当前datagrid中在编辑状态的行编号列表,直接使用即可

    EasyUI可扩展Editable DataGrid(可编辑数据表格)

    至于“工具”标签,这可能是指开发者可能会用到的一些辅助工具,如IDE(集成开发环境)、代码编辑器、调试器等,这些工具能帮助开发和调试使用EasyUI的Web应用,确保Editable DataGrid功能的正确实现和优化。...

    easyui datagrid 行编辑中combogrid和combobox显示问题

    修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...

    KindEditor 3.5 开源的HTML可视化编辑器

    KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的...

    基于easyui-textbox的颜色选择器及源码

    本文将深入探讨基于EasyUI的TextBox颜色选择器及其源码,帮助开发者理解这一组件的工作原理并实现自定义功能。 EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,使得开发者可以快速构建出美观、...

    Easyui DataGrid单元格编辑_扩展代码

    详细代码展现了如何在Easyui中使用DataGrid的单元格的编辑功能并扩展

Global site tag (gtag.js) - Google Analytics