手把手教你用 CKEDITOR （5）: Dialog 内嵌 IFrame

在上一篇博文中，姜哥跟大家探讨了在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;"
                        }
                    ]
                }