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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
详解angular中的作用域及继承
May 31 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
深入理解Vue router的部分高级用法
Aug 15 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 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
javascript数组去掉重复
2011/05/12 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
工程管理造价应届生求职信
2013/11/13 职场文书
小学生家长寄语
2014/04/02 职场文书
5s标语大全
2014/06/23 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2014年纠风工作总结
2014/12/08 职场文书
党员个人承诺书
2015/04/27 职场文书
城南旧事观后感
2015/06/11 职场文书