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 textarea自动增高并隐藏滚动条
Dec 16 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
python爬虫基本知识
2018/03/05 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
手写一个python迭代器过程详解
2019/08/27 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
采购主管的岗位职责
2013/12/17 职场文书
2014年大学生自我评价
2014/01/19 职场文书
森林防火宣传标语
2014/06/27 职场文书
责任书范本
2014/08/25 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2015最新民情日记范文
2015/06/26 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
Python Django模型详解
2021/10/05 Python