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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
JavaScript表单验证实现代码
May 22 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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中array_column函数简单实现方法
2016/07/11 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python函数基本使用原理详解
2020/03/19 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
保险公司年会主持词
2014/03/22 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
php png失真的原因及解决办法
2021/11/17 PHP
Python实现科学占卜 让视频自动打码
2022/04/09 Python