如何向我的 CKEditor 插件添加自定义功能？答案

【问题标题】：How do I add custom functionality to my CKEditor plugin?如何向我的 CKEditor 插件添加自定义功能？
【发布时间】：2014-04-01 16:51:02
【问题描述】：

我创建了 CKEditor 插件，它有一些选项卡，每个选项卡上都有一个不同的 iframe。在这些 iframe 中是包含网站上某些内容标题的表格。我希望能够点击表格行并让它插入被点击项目的标题。

问题是我不知道如何将这种自定义 javascript 添加到插件中。我有 plugin.js，它添加了用于添加按钮的 init 函数，单击该按钮时执行添加对话框窗口的命令。然后在我的 myDialog.js 中，我将对话窗口定义为：

CKEDITOR.dialog.add( 'addLinkDialog', function( editor ) {
  return {
    title: 'Links',
    minWidth: 800,
    minHeight: 600,
    contents: [
      {
        id : 'articlesTab',
        label : Drupal.t('Articles'),
        title : Drupal.t('Articles'),
        elements : [
      /* {
            id : 'articlenid',
            type : 'text',
            label : Drupal.t('Article Node ID')
          }, */
          {
            type : 'html',
            html : '<iframe src="/links/articles?link=1" style="width:900px; height:600px;"></iframe>',
          }
        ]
      },
      {
        id : 'menuTab',
        label : Drupal.t('Menu Items'),
        title : Drupal.t('Menu Items'),
        elements : [
          {
            type : 'html',
            html : '<div>MENU TEST</div>',
          }
        ]
      },
      {
        id : 'videosTab',
        label : Drupal.t('Videos'),
        title : Drupal.t('Videos'),
        elements : [
          {
            type : 'html',
            html : '<div>VIDEOS TEST</div>',
          }
        ]
      }
    ],
    onOk: function() {
      var editor = this.getParentEditor();
      // var content = this.getValueOf( 'articlesTab', 'articlenid' );
      // alert(content);
    }
  };
});

我知道当我单击对话框窗口上的按钮时我的 onOk 工作，但我只是不确定如何从 iframe 中获取信息，以及这样的函数应该去哪里（在我的 plugin.js 或 myDialog .js？）。

【问题讨论】：

标签： javascript iframe plugins ckeditor dom-manipulation

【解决方案1】：

我最终不得不制作另一个 js 文件并将其包含在 iframe 页面中，然后在 jquery 中使用 parent.document 选择器和 .find 来操作 iframe 之外的 dom 元素。

$(".videoUrlInput", parent.document).find('input.cke_dialog_ui_input_text').val(assetUrl);

【讨论】：