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选择器简述

    jquery选择器简述

    本篇文章主要是对jQuery选择器进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2015-08-08
  • jquery validate和jquery form 插件组合实现验证表单后AJAX提交

    jquery validate和jquery form 插件组合实现验证表单后AJAX提交

    在ajax流行的时代,好像很少能看见传统的同步提交表单方式了,是啊我们当然要用更加给力的AJAX来实现异步无刷新提交表单,好了开始今天的jQuery之旅吧,今天我们来利用jquery.validate和jquery.form 插件组合实现验证表单后AJAX提交 ,需要的朋友可以参考下
    2015-08-08
  • jQuery左侧大图右侧小图焦点图幻灯切换代码分享

    jQuery左侧大图右侧小图焦点图幻灯切换代码分享

    这篇文章主要介绍了jQuery左侧大图右侧小图焦点图幻灯切换特效,带有缩略图的焦点图切换代码,简单、时尚、大方,有需要的小伙伴可以参考下。
    2015-08-08
  • JQuery显示、隐藏div的几种方法简明总结

    JQuery显示、隐藏div的几种方法简明总结

    这篇文章主要介绍了JQuery显示、隐藏div的几种方法简明总结,本文总结了控制style、控制CSS、JQuery自带方法等几种显示、隐藏div的方法,需要的朋友可以参考下
    2015-04-04
  • JQuery实现的在新窗口打开链接的方法小结

    JQuery实现的在新窗口打开链接的方法小结

    jQuery 实现在新窗口中打开链接方法,收集了几个,大家可以根据需要选择使用。
    2010-04-04
  • jQuery中用on绑定事件时需注意的事项

    jQuery中用on绑定事件时需注意的事项

    本篇文章主要介绍了jQuery中用on绑定事件时需注意的事项,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • jQuery实现的图文高亮滚动切换特效实例

    jQuery实现的图文高亮滚动切换特效实例

    这篇文章主要介绍了jQuery实现的图文高亮滚动切换特效,涉及jquery基于鼠标事件针对页面元素遍历与动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery 创建Dom元素

    jQuery 创建Dom元素

    jQuery 创建Dom元素代码,需要的朋友可以参考下。
    2010-05-05
  • jQuery之关于resize()方法的使用

    jQuery之关于resize()方法的使用

    这篇文章主要介绍了jQuery之关于resize()方法的使用,具有很好的价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • jQuery AJAX应用实例总结

    jQuery AJAX应用实例总结

    这篇文章主要介绍了jQuery AJAX应用,结合实例形式总结分析了jQuery 使用AJAX访问各种格式数据相关应用操作实现技巧,需要的朋友可以参考下
    2020-05-05

最新评论