jQuery读取和设定KindEditor值的方法

在使用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查看找到最终结果：

从上面这个图中可以看出，要获取“今天天气很好”这个内容，我们只需要获取指定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();

赞 (0)

相关推荐

  • jquery自定义下拉列表示例

    jquery自定义下拉列表示例

    自从上次做了JQ自定义分页插件和表格插件后,就没在自定义过插件了,这一个月都在用linq和ef,基本前端都没怎么去碰了,今天有个同事说有个项目需要在下拉框里面带有复选框,本来想网上找下插件的,一想,其实这功能也并不难,于是就自己做了一个,也趁机再次熟悉下JQ自定义插件吧,好了,先附上效果图先: 看上去没怎么难吧,其实就是强化JQ,免得太久没用,生疏了.好了.附上我的代码: 复制代码 代码如下: (function($){ var option={     isEdit:false,  //是否可

  • Angularjs编写KindEditor,UEidtor,jQuery指令

    目前angularJS非常火热,本人也在项目中逐渐使用该技术,在angularJS中,指令可以说是当中非常重要的一部分,这里分享一些自己编写的指令: 注:本人项目中用了oclazyload进行部分JS文件加载 1.KindEditor 复制代码 代码如下: angular.module('AdminApp').directive('uiKindeditor', ['uiLoad', function (uiLoad) {     return {         restrict: 'EA',

  • JQuery 使用attr方法实现下拉列表选中

    html代码如下: <select id="category" name="category"> <option value="">请选择类别</option> <option value="1">类别1</option> <option value="2">类别2</option> <option value=&qu

  • JQuery实现鼠标滑过显示导航下拉列表

    当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="

  • jQuery插件datalist实现很好看的input下拉列表

    HTML5中定义了一种input框很好看的下拉列表--datalist,然而目前它的支持性并不好(万恶的IE,好在你要渐渐退役了...).于是最近更据需求写了一个小型datalist插件,兼容到IE8(IE7应该没多少人用了吧?).实现的具体需求如下: 当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦),单击鼠标左键或者enter键将选中的列表的值输入到input框. 具体的实现代码如下:

  • jQuery三级下拉列表导航菜单代码分享

    jQuery三级下拉列表导航菜单代码分享

    本文实例讲述了jQuery三级下拉列表导航菜单.分享给大家供大家参考.具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单. 运行效果图:             -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta

  • jQuery实现自定义下拉列表

    html代码: 复制代码 代码如下: <div class="dropdownContainer">     <div class="dropdownDefault">1</div>     <span class="downArrow arrow"></span>     <ul class="dropdrown-menu">         <l

  • jQuery弹出下拉列表插件（实现kindeditor的@功能）

    jQuery弹出下拉列表插件（实现kindeditor的@功能）

    这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样).在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求,于是我决定在该插件上改良,主要是下面几点: 1. @内容的输入,能够匹配多个属性值. 2. 选中列表值后,是成块插入kindeditor的(方便删除,也利于区分文本). 3. 修正输入偶数关键字@功能失效问题. 前言 在一开始,我用bootstrap-suggest(https://github.

  • jQuery编辑器KindEditor4.1.4代码高亮显示设置教程

    编辑器KindEditor官网: http://www.kindsoft.net/ 1.需要加载的JS和CSS文件为: 复制代码 代码如下: <script src="kindeditor-4.1.4/kindeditor.js" type="text/javascript" charset="utf-8"></script> <script src="kindeditor-4.1.4/plugins/co

  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--

随机推荐