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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
JSON相关知识汇总
Jul 03 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 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
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python切片操作实例分析
2018/03/16 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
Python中and和or如何使用
2020/05/28 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
Java如何调用外部Exe程序
2015/07/04 面试题
高中生自我鉴定范文
2013/10/30 职场文书
护理专科自荐书范文
2014/02/18 职场文书
学前班评语大全
2014/05/04 职场文书
超市客服工作职责
2014/06/11 职场文书
检讨书范文500字
2015/01/28 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
利用Python实现Picgo图床工具
2021/11/23 Python
Vue操作Storage本地化存储
2022/04/29 Vue.js
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技