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 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
validator验证控件使用代码
Nov 23 Javascript
javascript常用的正则表达式实例
May 15 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
JavaScript实现手风琴效果
Feb 18 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
Function.prototype.bind用法示例
2013/09/16 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
node内置调试方法总结
2018/02/22 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
学生打架检讨书大全
2014/01/23 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
师德师风剖析材料
2014/09/30 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
感谢信怎么写
2015/01/21 职场文书
人生遥控器观后感
2015/06/11 职场文书
八年级数学教学反思
2016/02/17 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
python图片灰度化处理的几种方法
2021/06/23 Python