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中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
php数据库连接
2006/10/09 PHP
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python延时操作实现方法示例
2018/08/14 Python
详解Python正则表达式re模块
2019/03/19 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Python使用re模块验证危险字符
2020/05/21 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
企划专员岗位职责
2013/12/09 职场文书
另类冲刺标语
2014/06/24 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2015年服务员工作总结
2015/04/08 职场文书
工作失职检讨书范文
2015/05/05 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python