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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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自动更新新闻DIY
2006/10/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
深入理解NumPy简明教程---数组2
2016/12/17 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python生成器与迭代器详解
2019/01/01 Python
python实现可逆简单的加密算法
2019/03/22 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
python使用建议与技巧分享(一)
2020/08/17 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
销售找工作求职信
2013/12/20 职场文书
追悼会子女答谢词
2014/01/28 职场文书
小学体育教学反思
2014/01/31 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
生日庆典策划方案
2014/06/02 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js