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 相关文章推荐
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
el-form 多层级表单的实现示例
Sep 10 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
PHP完整的日历类(CLASS)
2006/11/27 PHP
第六章 php目录与文件操作
2011/12/30 PHP
二招解决php乱码问题
2012/03/25 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
angular分页指令操作
2017/01/09 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
安装dbus-python的简要教程
2015/05/05 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
python和php哪个更适合写爬虫
2020/06/22 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
C语言50道问题
2014/10/23 面试题
大专生毕业的自我评价
2014/02/06 职场文书
幼儿教师工作感言
2014/02/14 职场文书
家教广告词
2014/03/19 职场文书
技术负责人任命书
2014/06/05 职场文书
工地安全质量标语
2014/06/07 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android