jQuery读取和设定KindEditor值的方法

 更新时间:2013年11月22日 09:03:56   作者:  
这篇文章主要介绍了jQuery读取和设定KindEditor值的方法,大家参考使用吧

在使用Kindeditor的时候,想要利用Ajax传值,但是通过editor封装的方法是行不通的,原因在于编辑器我们是放在另一个jsp页面,通过iframe来加载的,同时这个iframe的display="none"的,要通过一个事件来触发。

复制代码 代码如下:

<iframe src="../common/editor.jsp" frameborder="0" scrolling="no" style="margin: 0"
    width="100%" height="300" name="zwFrame" id="zwFrameId"></iframe>

既然原本方法行不通,那我就只好通过jQuery来获取了。首先我想到的是读取内容“textarea”里面的内容,即:$(“#editor”).html(),但是这样是获取不到的。于是我想通过获取iframe里面的内容来获取,也没有获取到,最后通过firefox的debug查看找到最终结果:


从上面这个图中可以看出,要获取“今天天气很好”这个内容,我们只需要获取指定body里面的内容即可。
处理流程:首先获取最外层的iframe,通过iframe取里面的子元素iframe,在进入一层取里面的body即可。如下:

复制代码 代码如下:

var editorText = $(window.frames['zwFrame'].document).find("iframe").contents().find("body");
var contents = editorText.html();

其中contents():查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容。

下面提供几种获取iframe里面元素内容的方法:

复制代码 代码如下:

$(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html();


显示iframe中body元素的内容
复制代码 代码如下:

$(document.getElementById("iframeId").contentWindow.document.body).html();

获取iframe中textarea元素的内容

复制代码 代码如下:

$(window.frames["iframeName"].document).find("#textareaId").html();

相关文章

  • JQuery如何按name属性选择元素

    JQuery如何按name属性选择元素

    这篇文章主要介绍了JQuery如何按name属性选择元素问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • jquery不常用方法汇总

    jquery不常用方法汇总

    本文给大家汇总介绍了几个jQuery中不常用的方法,记录一下,分享给大家,有需要的小伙伴可以参考下。
    2015-07-07
  • jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

    jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

    这篇文章主要介绍了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果,涉及jquery鼠标事件及页面元素动态样式设置的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 基于cookie实现zTree树刷新后展开状态不变

    基于cookie实现zTree树刷新后展开状态不变

    这篇文章主要为大家详细介绍了如何基于cookie实现zTree树刷新后,展开状态不变,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Lazy Load 延迟加载图片的jQuery插件中文使用文档

    Lazy Load 延迟加载图片的jQuery插件中文使用文档

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的
    2012-10-10
  • jQuery AJAX 调用WebService实现代码

    jQuery AJAX 调用WebService实现代码

    用jQuery调用其他项目的WebService的代码,需要的朋友可以参考下。
    2010-03-03
  • 使用jquery模拟a标签的click事件无法实现跳转的解决

    使用jquery模拟a标签的click事件无法实现跳转的解决

    这篇文章主要给大家介绍了关于使用jquery模拟a标签的click事件无法实现跳转的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • jQuery中on()方法用法实例

    jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能、定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下
    2015-01-01
  • EasyUI 中combotree 默认不能选择父节点的实现方法

    EasyUI 中combotree 默认不能选择父节点的实现方法

    下面小编就为大家带来一篇EasyUI 中combotree 默认不能选择父节点的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • jQuery实现渐变弹出层和弹出菜单的方法

    jQuery实现渐变弹出层和弹出菜单的方法

    这篇文章主要介绍了jQuery实现渐变弹出层和弹出菜单的方法,涉及jQuery渐变效果及css显示的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02

最新评论