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 charAt的使用示例
Feb 18 Javascript
JS获取时间的方法
Jan 21 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
vue 实现tab切换保持数据状态
Jul 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
php的access操作类
2008/04/09 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
php7下的filesize函数
2019/09/30 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
javascript如何实现create方法
2019/11/04 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
浅析Git版本控制器使用
2017/12/10 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
html5 标签
2009/07/16 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
应届专科生个人的自我评价
2014/01/05 职场文书
办公室日常管理制度
2015/08/04 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
Go遍历struct,map,slice的实现
2021/06/13 Golang
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android