Javascript 访问编辑器对话框HTML元素

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

从本质上说，我是在他们的链接对话框中添加内部链接，在那里，我在章节和出版物之间分割了链接。当用户从“选择”下拉列表中选择一个节时，该节中的出版物将填充到另一个下拉列表中

正在从plugin文件夹中的link.js文件修改以下代码。我删掉了所有不必要的部分，删掉了我认为相关的部分。正如您在下面的代码中看到的，我定义了一个select下拉列表，id为'section'，后跟'item'下拉列表。如何在节下拉列表的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，使它们不可用。虽然我将下拉部分命名为CKEditor，但它并不总是相同的INT，因此我需要在设置阶段找出如何获取它。

我知道如何使用jQuery获取176_部分。如果只知道节而不知道前缀，请尝试此选择器：

假设图元是一个选择框：

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

这将抓取id包含_部分的所有选择框

看看这个：

如果您不使用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.
    }
}  

---

后一种方法已根据此答案进行了修改：

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

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

我还找到了一个解决方案。 我在/\u 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\u dom\u元素来获取domeElement

在UI元素的防御中，您可以添加onLoad函数，获得object.real\u dom\u元素并添加如下属性：

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属性访问元素

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

---

Cheers

在javascript中，“id”属性用于内部引用。它不会将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);

    }
}

---

正如阿方索所指出的，这就是你所寻找的

我正在添加一些代码来完成它

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

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

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

然后使用info作为对话框名称

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

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

---

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

谢谢，我实际上不知道部分id字符串，它在未来的项目中会非常有用：如果只搜索后缀，请使用带有选择器$=的结尾，而不是包含选择器。同样，如果要搜索前缀，请使用^=。这些应该也适用于document.querySelector和queryselectoral。这让我走上了正确的轨道，所以我会给你正确的答案。我最后做的是在每个编辑器的作用域内设置一个全局变量，该编辑器保存我用该方法获取的UI元素。我真的不喜欢我的实现，但这个问题已经拖得太久了，我想有时候你不得不用你所拥有的东西：谢谢你的帮助。我们如何在对话框中获得当前关注的元素？你为什么要通过jquery元素？这是没有道理的！如何在对话框中获得当前关注的元素？？