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 相关文章推荐
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
js的回调函数详解
Jan 05 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 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
php session 错误
2009/05/21 PHP
php 引用(&amp;)详解
2009/11/20 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
javascript ajax 仿百度分页函数
2013/10/29 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
微信小程序(订阅消息)功能
2019/10/25 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Python 字符串换行的多种方式
2018/09/06 Python
Django 视图层(view)的使用
2018/11/09 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
请解释在new与override的区别
2012/10/29 面试题
暑期社会实践学生的自我评价
2014/01/09 职场文书
计算机专业自荐信
2014/05/24 职场文书
服装设计专业求职信
2014/06/16 职场文书
婚宴邀请函
2015/01/30 职场文书
大学生军训感言
2015/08/01 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python