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 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
vue实现表格过滤功能
Sep 27 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&amp;java(三)
2006/10/09 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
2014三八妇女节活动总结
2014/03/01 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
小学教师教学随笔
2015/08/14 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
对讲机的最大通讯距离是多少
2022/02/18 无线电
Python闭包的定义和使用方法
2022/04/11 Python