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对象，可以在CKEditor元素上使用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。（它在你的示例代码之外）I.e。相关对话框页面中“top”元素的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"]')

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

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

如果你没有使用jQuery，那么vanilla 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.
    }
}

后一种方法是从这个答案修改而来的：Getting elements by a partial id string in javascript

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

在UI元素的defenition中，您可以添加onLoad函数，获取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属性访问元素

我是这样做的，它有效。也许有更简单的解决方案，但我找到了一个解决方案，所以我很高兴我发现了这个。

干杯

访问CKEditor对话框HTML元素

5 个答案: