访问 CKEditor 对话框 HTML 元素

Question

我很难弄清楚我必须做什么才能访问我正在修改的插件中的 CKEditor 中的某些 UI 元素。

本质上，我将内部链接添加到他们的链接对话框中，其中我在部分和出版物之间划分了链接。当用户从选择下拉列表中选择一个部分时，该部分中的出版物将填充在不同的下拉列表中。

以下代码是从插件文件夹中的 link.js 文件修改的。我删掉了所有不必要的部分，并省略了我认为相关的部分。正如您在下面的代码中看到的，我定义了一个选择下拉列表，其 id 为“section”，后跟“item”下拉列表。如何在部分下拉列表的 onChange 函数中访问“项目”下拉列表并填充它？

如果我对最终在运行时填充到 ID 标记中的 ID 进行硬编码，那么我的 ajax 代码已经全部弄清楚并且可以工作，但是这种情况会因编辑器而异，因此我不能依赖硬编码值。

{
 type :  'vbox',
 id : 'internalOptions',
 children :
 [
  {
   id : 'section',
   type : 'select',
   items :
   [
   ],
   setup : function( data )
   {
    //populate sections here
   },
   onChange : function (data)
   {
    //populate items here
   },
  },
  {
   id : 'item',
   type : 'select',
   items :
   [
   ],
   setup : function( data )
   {
   },
  }

 ]
}

编辑：我遇到的问题是CKEditor会更改每个ID，因此它们是unqiue的。虽然我将下拉菜单命名为“section”，CKEditor 将其称为 176_section，但它并不总是相同的 INT，因此我需要弄清楚如何在设置阶段获取它。

Answer 1

如果要获取 CKEditor 对话框中元素的 DOM 对象，可以使用 getElement。

要获取 CKEditor 元素，请在对话框中使用 getContentElement

Answer 2

“id”属性供 JavaScript 中的内部参考。它不会将 id 应用于生成的 html 元素。

我使用了一种非常hacky的解决方法，它可能适用于所有情况，也可能不适用于所有情况，但其想法是您存储对ckeditor自动应用的id的引用。

{
    id : 'txtCredit', /* not CSS ID attribute! */
    type : 'text',
    label : 'Credit',
    className : 'imageCredit',

    elemId : null, /* to store a reference to ckeditor's automagically generated id */

    setup : function() {

        // get the id that ckeditor generated for this element and store as an object property
        this.elemId = this.getInputElement().getAttribute('id');

        // now we can reference the element by the id we stored above. Hacky? Yeah probably
        var inputElem = document.getElementById(this.elemId);

    }
}

Answer 3

正如 AlfonsoML 指出的那样， getContentElement 就是您要寻找的。

我正在添加更多代码来完成它，

您也必须知道对话框页面的 id。 （它在您的示例代码之外）即相关对话框页面中“顶部”元素的 id（如果对话框中有多个页面，您的字段可能位于第一个页面之外的另一个页面上）。

例如，如果对话框 js 文件的内容是：

...
contents : [
  {
    id : 'info',
    label : 'blabla',
    elements :
      ...

那么您使用“info”作为对话框名称。

在本地函数中，您可以使用以下代码：

var dialog = this.getDialog();
var sectionElement = dialog.getContentElement( 'info', 'section' );

CKEditor 中的 getContentElement 正在处理名称与实际 id 之间的转换。

Answer 4

我知道如何使用 jQuery 获取 #176_section。如果您只知道 section 而不是前缀，请尝试此选择器：

假设该元素是一个选择框：

$('select[id*="_section"]')

这将抓取所有 id 包含“_section”的选择框。

看看这个： http://api.jquery.com/attribute-contains-selector /

如果您不使用 jQuery，则普通的 javascript 有点冗长，但不太难掌握：

var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
    if(selects[i].id.indexOf("_section")) {
        // Your select box is here.  Do something with it.
    }
}  

后一种方法是根据此答案修改的： 在 javascript 中通过部分 id 字符串获取元素

Answer 5

我也找到了解决办法。
我在 /_source/core/dom/element.js 中更改了元素类型的构造函数

    CKEDITOR.dom.element = function( element, ownerDocument )
    {
        if ( typeof element == 'string' )
        element = ( ownerDocument ? ownerDocument.$ : document ).createElement(element );
    this.real_dom_element = element;
    // Call the base constructor (we must not call CKEDITOR.dom.node).
    CKEDITOR.dom.domObject.call( this, element );
};

现在，如果您掌握了 CKEDITOR.dom.element 对象，您可以通过访问 object.real_dom_element 来获取 domElement

在定义中您可以添加 onLoad 函数的 UI 元素，您获取 object.real_dom_element 并添加如下属性：

onLoad : function()
{
   $(this.getElement().blicsm_element).attr("myID", "link_url");
}

稍后您可以像这样访问该字段（使用 jQuery 的示例）

$('div[myID="link_url"]').find("input");

因此您有 3 个步骤：
1. 更改 CKEDITOR.dom.element 构造函数，以便您可以访问真正的 dom 元素
2.为稍后要访问的字段添加onLoad事件并添加自定义属性
3. 通过您在 onLoad 中设置的 custum 属性访问该元素

我就是这样做的并且它有效。也许有更简单的解决方案，但我在寻找解决方案方面遇到了困难，所以我很高兴找到了这个。

干杯