javascript 访问 CKEditor 对话框 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4090536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing CKEditor Dialog HTML Elements
提问by Gazillion
I'm having a tough time figuring out what I must do to access certain UI Elements in the CKEditor in a plugin I am modifying.
我很难弄清楚我必须做什么才能在我正在修改的插件中访问 CKEditor 中的某些 UI 元素。
Essentially I am adding internal links to their link dialog where links I split up between sections and publications. When a user picks a section from a select drop down the publications from that section are populated in a different drop down.
本质上，我将内部链接添加到他们的链接对话框中，其中我在部分和出版物之间拆分链接。当用户从选择下拉列表中选择一个部分时，该部分的出版物将填充在不同的下拉列表中。
The following code is being modified from the link.js file in the plugin folder. I cut out all the unnecessary bits and left out what I thought was relevant. As you can see in the code below I am defining a select dropdown with the id of 'section' followed by the 'item' dropdown. How do I access the 'item' dropdown, to populate it, in the onChange function of the section dropdown?
以下代码正在从插件文件夹中的 link.js 文件中修改。我删掉了所有不必要的部分，并忽略了我认为相关的内容。正如您在下面的代码中看到的，我定义了一个选择下拉列表，其 ID 为“section”，后跟“item”下拉列表。如何在部分下拉列表的 onChange 函数中访问“项目”下拉列表以填充它？
I have my ajax code all figured out and working if I hardcode the IDs that end up getting populated in the ID tag on runtime but this changes from editor to editor so I can't rely on hardcoded values.
如果我对最终在运行时填充在 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 )
{
},
}
]
}
EDIT:The problem I have is that the CKEditor will change every ID so they are unqiue. Though I name the dropdown "section" CKEditor calls it 176_section but it isn't always the same INT hence why I need to figure out how to grab it during the setup phase.
编辑：我遇到的问题是 CKEditor 将更改每个 ID，因此它们是 unqiue。虽然我将下拉菜单命名为“部分”，CKEditor 将其称为 176_section 但它并不总是相同的 INT 因此我需要弄清楚如何在设置阶段获取它。
采纳答案by AlfonsoML
If you want to get the DOM object of an element in a CKEditor dialog you can use getElementon the CKEditor element.
如果您想在 CKEditor 对话框中获取元素的 DOM 对象，您可以在 CKEditor 元素上使用getElement。
And to get the CKEditor element, use getContentElementon the dialog
要获取 CKEditor 元素，请在对话框中使用getContentElement
回答by Andy Ford
The 'id' property is for internal reference in your javascript. It does not apply an id to the generated html element.
'id' 属性用于您的 javascript 中的内部参考。它不会将 id 应用于生成的 html 元素。
I've used a very hacky workaround that may or may not work in all situations, but the idea is you store a reference to the id that ckeditor automagically applies.
我使用了一种非常笨拙的解决方法，它可能适用于所有情况，也可能不适用于所有情况，但这个想法是您存储对 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);
}
}
回答by Erik Melkersson
As AlfonsoML pointed to, the getContentElementis what you are looking for.
正如 AlfonsoML 所指出的，getContentElement就是您要查找的内容。
I'm adding some more code to complete it
我正在添加更多代码来完成它
You must know the id of the dialog page too. (It's outside your example code) I.e. the id of the "top" element in the relevant dialog page (your field may be on another page than the first if you have several pages in the dialog).
您也必须知道对话框页面的 id。（它在您的示例代码之外）即相关对话框页面中“顶部”元素的 id（如果对话框中有多个页面，您的字段可能位于不同于第一个页面的另一个页面上）。
For example if the contents of the dialog js-file are:
例如，如果对话框 js 文件的内容是：
...
contents : [
{
id : 'info',
label : 'blabla',
elements :
...
Then you use "info" as the dialog name.
然后使用“info”作为对话框名称。
In the local functions you may use the code:
在本地函数中，您可以使用以下代码：
var dialog = this.getDialog();
var sectionElement = dialog.getContentElement( 'info', 'section' );
The getContentElement in CKEditor is handling the translation between the names the the actual id.
CKEditor 中的 getContentElement 正在处理名称与实际 id 之间的转换。
回答by simon
I also find a solution. I changed the conctructor of the element type in /_source/core/dom/element.js
我也找到了解决办法。我在/_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 );
};
Now, if you get a hold on the CKEDITOR.dom.element object you can just get the domElement by accessing object.real_dom_element
现在，如果您持有 CKEDITOR.dom.element 对象，您可以通过访问 object.real_dom_element 来获取 domElement
In the defenition of the UI elements you can add a onLoad function, you get the object.real_dom_element and add an attribute like this:
在 UI 元素的定义中，您可以添加一个 onLoad 函数，您可以获取 object.real_dom_element 并添加如下属性：
onLoad : function()
{
$(this.getElement().blicsm_element).attr("myID", "link_url");
}
Later you can access the field like this (example with jQuery)
稍后您可以像这样访问该字段（使用 jQuery 的示例）
$('div[myID="link_url"]').find("input");
So you have 3 steps: 1. Change the CKEDITOR.dom.element constructor so you can access the real dom element 2. Add a onLoad event to the field you want to access later on and ad a custom attribute 3. Access the element by the custum attribute you've set in the onLoad
所以你有 3 个步骤： 1. 更改 CKEDITOR.dom.element 构造函数，以便您可以访问真正的 dom 元素 2. 将 onLoad 事件添加到您稍后要访问的字段并添加自定义属性 3. 通过以下方式访问元素您在 onLoad 中设置的 custum 属性
I did it like this and it works. Maybe there are simpler solutions, but I had a stuggle finding a solution, so I'm happy I found this.
我是这样做的，而且效果很好。也许有更简单的解决方案，但我很难找到解决方案，所以我很高兴找到了这个。
Cheers
干杯
回答by Stephen
I know how you can grab #176_sectionusing jQuery. If you only know sectionand not the prefix, try this selector:
我知道如何#176_section使用 jQuery抓取。如果你只知道section而不知道前缀，试试这个选择器：
Assuming the element is a select box:
假设元素是一个选择框：
$('select[id*="_section"]')
That will grab all select boxes that have an id that contains "_section".
这将抓取所有具有包含“_section”的 id 的选择框。
Have a look at this: http://api.jquery.com/attribute-contains-selector/
看看这个：http: //api.jquery.com/attribute-contains-selector/
If you aren't using jQuery, the vanilla javascript is a bit more verbose, but not too hard to grasp:
如果您不使用 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.
}
}
The latter method was modified from this answer: Getting elements by a partial id string in javascript
后一种方法是从这个答案修改的： 通过 javascript 中的部分 id 字符串获取元素
