手把手教你 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 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
JavaScript Promise 用法
Jun 14 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
vue之数据交互实例代码
Jun 20 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
Vue使用鼠标在Canvas上绘制矩形
Dec 24 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连接mysql数据库代码
2009/03/10 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
Vue按需加载的具体实现
2017/12/02 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python线程池threadpool使用篇
2018/04/27 Python
使用python制作一个解压缩软件
2019/11/13 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
Django框架请求生命周期实现原理
2020/11/13 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
电子商务网站的创业计划书
2014/01/05 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
法律进机关实施方案
2014/03/12 职场文书
元旦寄语大全
2014/04/10 职场文书
运动会口号16字
2014/06/07 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
周年庆典答谢词
2015/01/20 职场文书
民事申诉状范本
2015/05/20 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Python3 类型标注支持操作
2021/06/02 Python
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL