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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 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程序
2006/10/09 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
php 实现进制相互转换
2016/04/07 PHP
Yii全局函数用法示例
2017/01/22 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python实现二叉树的遍历
2017/12/11 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
初学者学习Python好还是Java好
2020/05/26 Python
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
期末自我鉴定
2014/01/23 职场文书
劳动实践课感言
2014/02/01 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
科学发展观活动总结
2014/08/28 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
工作时间调整通知
2015/04/24 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server