手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解


Posted in Javascript onJune 18, 2019

本文实例讲述了CKEDITOR 4 实现Dialog 内嵌 IFrame操作。分享给大家供大家参考,具体如下:

在上一篇博文《CKEDITOR 4 扩展插件制作》中,姜哥跟大家探讨了在ckeditor中添加dialog,已经添加dialog的一些控件,最终将控件中的值插入到ckeditor编辑器中的过程。但是实际上,我们更多的应用,还是会在dialog中,添加iframe组件,直接引用外部网页,以实现更为复杂的功能。今天姜哥就和大家一起分享一下,这个开发过程。

继续我们上一个工程中的例子,我们是在contents中添加了elements,就像下面这样:

contents:           //每一个contents在对话框中都是一个tab页
      [
        {
          id: 'user',      //contents的id
          label: 'You name',
          title: 'You name',
          elements:       //定义contents中的内容,我们这里放一个文本框,id是name
          [
            {
              id: 'name',
              type: 'text',
              style: 'width: 50%;',
              label: 'You name',
            }
          ]
        }
      ],

如果我们把elements中间的内容,换成iframe,会是什么样呢?让我们来看一看:

contents:           //每一个contents在对话框中都是一个tab页
      [
        {
          id: 'user',      //contents的id
          label: 'You name',
          title: 'You name',
          elements:
          [
            {
              type: "html",
              html: "<iframe id='myiframe' width='100%' height='100%' src='" + "http://www.163.com" + "'></iframe>",
              style: "width:800px;height:580px;padding:0;"
            }
          ]
        }
      ],

在这里,我们描述了我们的elements的类型是html,接着我们插入了一段html代码,也就是我们的iframe,将网易链接了进来,最后用style标签定义了对话框的大小。保存之后,打开看看效果:

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

果然,我大“黄易”的首页被载入进来了,看来这个路子可行!那接下来,我们可以试着载入自己的页面了。在ckeditor_sample.html文件旁边,再新建一个文件,叫做myiframe.html,类似这样:

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

打开这个文件进行编辑,填入以下代码,我们构建一个带有输入框和复选框的页面:

<html>
  <head></head>
  <body>
    <div>
      姓名: <input type="text" id="username" name="username" value="" /> <br/>
      <input type="checkbox" name="yourbook" value="C++">《C++ 从入门到放弃》</input>
      <input type="checkbox" name="yourbook" value="headfirst">《HeadFirst 设计模式》</input>
      <br />
      <input type="checkbox" name="yourbook" value="Java">《Thinking in Java》</input>
      <input type="checkbox" name="yourbook" value="django">《姜哥的Django匠人生活》</input>
    </div>
  </body>
</html>

然后把myplug.js中elements段的内容改成下面这样,将iframe的src指向我们自己的创建的页面:

contents:           //每一个contents在对话框中都是一个tab页
      [
        {
          id: 'user',      //contents的id
          label: 'You name',
          title: 'You name',
          elements:
          [
            {
              type: "html",
              html: "<iframe id='myiframe' width='100%' height='100%' src='" + "./myiframe.html" + "'></iframe>",
              style: "width:800px;height:580px;padding:0;"
            }
          ]
        }
      ],

保存后打开看效果:

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

太棒了!页面出来了,那么,我们怎么获取获取页面上的输入值和复选框的值呢?
还记得上一节,我们打的那些代码中,那些onLoad,onShow之类的函数吗?其实看名字,都可以知道,这些函数被触发的时刻,当我们点击“确定”按钮的时候,会触发onOk事件,同时自动调用onOk()函数,那我们就在onOk()里写点儿代码吧。

onOk: function () {
        var html = "";
        var your_name = document.getElementById('myiframe').contentDocument.getElementById('username');
        //使用JS最基础的getElementById找到我们的iframe控件,然后再获取id为username的控件
        html = html + "<h2>" + your_name.value + ": </h2>";
        var selected_books = document.getElementById('myiframe').contentDocument.getElementsByName('yourbook');
        //使用JS最基础的getElementById找到我们的iframe控件,然后再获取所有name为yourBook的控件
        var books = "";
        for(var i=0; i< selected_books.length; i++){
          //遍历我们的selected数组
          if (selected_books[i].checked){
            books = books + "<p> " + selected_books[i].value + "</p>";
          }
        }
        html = html + books;
        editor.insertHtml(html);
        this.commitContent();
      },

我们用了最基础的js语法,从dom对象中获取我们想要的控件和控件中的值,学过js语法的同学应该一眼就看的出来,这个真的很简单,让我们来运行一下看看吧:

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

Oooooops!太糟糕了,居然又报错了,F12打开的调试窗口中,可以看到我们这个的这个错误叫做:

Blocked a frame with origin "null" from accessing a cross-origin frame

错误的意思是:未捕获的安全错误:阻止了一个域为null的frame页面访问另一个域为null的页面。

姜哥给他翻译成人话:其实是浏览器为了避免一种叫做“跨域攻击”的黑客攻击手段,阻止了两个不同域名之间的dom操作。由于我们的页面是本地打开的,浏览器中的地址栏是类似下面这种的本地地址,因此无法访问iframe页面中的值:file:///E:/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/ckeditor_4.8.0_full/ckeditor_sample.html

怎么办呢?其实一般小伙儿伴开发这个页面,都是运行在一个工程里,或者一个项目里,本来就是运行在类似http://localhost/xxx这种网络地址下的,不会有问题,但是我们现在是想调试下啊,怎么办呢。。。

如果只是想调试学习一下,其实特别简单,那就是——换一个浏览器!比如IE浏览器,就妥妥啦!

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

注意:这里不是说这段代码在Chrome下无法运行,只是浏览器特性不同,chrome不允许这种不在同一个域名下的内嵌页面通过dom接口来访问,安全性比较高。换句话说就是,如果我们这段代码是发布在一个网站上,比如你放在nginx里,浏览器通过http://localhost/ckeditor/ckeditor_sample.html这种方式去打开我们的页面,就没有问题了!

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

相当成功,对吧?让我再次点击我们的插件,发现了什么?对了!What the fuck!上次填入的内容居然还在里面!

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

肿么办?还记得我们可以使用的函数吗?对!我们可以用onHide()函数,在对话框关闭时,刷新一下myiframe.html,以保证下一次打开时,是一个全新的页面:

onHide: function () {
        document.getElementById('myiframe').contentDocument.location.reload();
      },

再次保存之后,尝试一下,完全正常了。

今天我们学习了ckeditor自定义插件的高级用法,涉及到了从内嵌iframe取值的相关操作,也解释了几个常见的问题,希望对大家有所帮助。关于ckeditor的用法,暂时先探讨到这里,下次有新的内容时,会再次续更。

完整实例代码点击此处本站下载

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
分类解析jQuery选择器
Nov 23 Javascript
JS实现复制功能
Mar 01 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 #Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 #Javascript
使用js在layui中实现上传图片压缩
Jun 18 #Javascript
jquery中为什么能用$操作
Jun 18 #jQuery
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 #Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 #Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 #Javascript
You might like
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php获取汉字首字母的函数
2013/11/07 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
Python实现的选择排序算法示例
2017/11/29 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python中metaclass原理与用法详解
2019/06/25 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python实现邮件自动发送
2019/08/10 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
大学生自荐书范文
2013/12/10 职场文书
《社戏》教学反思
2014/04/15 职场文书
党支部换届选举方案
2014/05/08 职场文书
项目建议书怎么写
2014/05/15 职场文书
淘宝店策划方案
2014/06/07 职场文书
检举信的写法
2019/04/10 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
浅谈Web Storage API的使用
2021/06/23 Javascript