jQuery读取和设定KindEditor值的方法


Posted in Javascript onNovember 22, 2013

在使用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查看找到最终结果:
jQuery读取和设定KindEditor值的方法

从上面这个图中可以看出,要获取“今天天气很好”这个内容,我们只需要获取指定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();
Javascript 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
实现51Map地图接口(示例代码)
Nov 22 #Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 #Javascript
jquery根据name属性查找的小例子
Nov 21 #Javascript
js 走马灯简单实例
Nov 21 #Javascript
js获取客户端外网ip的简单实例
Nov 21 #Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 #Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 #Javascript
You might like
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
详解Python self 参数
2019/08/30 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
大四学生毕业自荐信
2013/11/07 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
论文诚信承诺书
2014/05/23 职场文书
大学生个人求职信例文
2014/07/07 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python