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改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
解析vue中的$mount
Dec 21 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
实现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中对用户身份认证实现两种方法
2011/06/04 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
Javascript开发包大全整理
2006/12/22 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python getpass模块用法及实例详解
2019/10/07 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
python实现门限回归方式
2020/02/29 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
Why do we need Unit test
2013/01/03 面试题
Python的两道面试题
2013/06/29 面试题
自荐信的五个重要部分
2013/10/29 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
户外婚礼策划方案
2014/02/08 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
买房协议书范本
2014/10/23 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
节水倡议书
2015/01/19 职场文书
职称评定个人总结
2015/03/05 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
阿里云日志过滤器配置日志服务
2022/04/09 Servers
MySQL数据库简介与基本操作
2022/05/30 MySQL