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 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
node+vue实现文件上传功能
May 28 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
一个js实现的所谓的滑动门
2007/05/23 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
前端微信支付js代码
2016/07/25 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
python判断windows系统是32位还是64位的方法
2015/05/11 Python
使用numba对Python运算加速的方法
2018/10/15 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
讲座新闻稿
2015/07/18 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL