访问 CKEditor 对话框 HTML 元素

Question

我正在修改一个插件，但我很难弄清楚如何访问CKEditor中的某些UI元素。基本上，我正在将内部链接添加到链接对话框中，其中链接被分成不同的部分和出版物。当用户从下拉选择列表中选择一个部分时，该部分的出版物将在另一个下拉列表中填充。

以下代码正在从插件文件夹中的link.js文件进行修改。我切掉了所有不必要的部分，并留下了我认为相关的部分。如您所见，在下面的代码中，我正在定义一个带有'id'为'section'的选择下拉列表，后跟'item'下拉列表。如何在section下拉列表的onChange函数中访问'item'下拉列表以填充它呢？

如果我硬编码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，使它们唯一。尽管我将下拉菜单命名为“section”，但CKEditor将其称为176_section，但它的INT并不总是相同的，因此我需要在设置阶段找出如何抓取它。

- Gazillion

Answer 1

如果您想获取CKEditor对话框中元素的DOM对象，可以在CKEditor元素上使用getElement。要获取CKEditor元素，请在对话框上使用getContentElement。

- AlfonsoML

---

这让我找到了正确的方向，所以我会给你正确的答案。我最终做的是在每个编辑器的作用域内设置一个全局变量，该变量保存了我使用该方法获取的UI元素。我不太喜欢我的实现方式，但这个问题已经拖延太久了，有时候你必须用手头的东西去解决它 :) 感谢您的帮助。 - Gazillion

如何在对话框中获取当前焦点元素？ - bpbhat77

Answer 2

'id'属性是用于在您的javascript中进行内部引用的。它不会将id应用于生成的html元素。

我使用了一种非常巧妙的解决方法，可能并不适用于所有情况，但思路是存储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);

    }
}

- Andy Ford

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之间的翻译。

- Erik Melkersson

---

如何在对话框中获取当前聚焦的元素？ - bpbhat77

Answer 4

我也找到了一个解决方案。 我修改了/_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

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

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

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

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

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

我就是这样做的，它有效。也许有更简单的解决方案，但我曾经苦苦寻找解决方案，所以我很高兴找到了这个。

干杯

- simon

---

你为什么要通过jQuery元素来做这件事？这毫无意义！ - Y K

Answer 5

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

假设元素是一个选择框：

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

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

看一下这个：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字符串获取元素

- Stephen

---

谢谢，我其实不知道部分ID字符串，它在未来的项目中会非常有用 :) - Gazillion

如果你只搜索后缀，请使用以 ends-with 选择器($=)，而不是包含 contains 选择器。同样，如果你要搜索前缀，请使用 ^=。这些方法也适用于 document.querySelector 和 querySelectorAll。 - Raphael Schweikert