javascript ckeditor 将事件处理程序添加到对话框元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7005592/
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
ckeditor add event handler to dialog element
提问by oggiemc
I'm writing a custom dialog/plugin for ckeditor. What I want to know is how I can add an eventlistenerto a select box in the dialog, to alert when the selected value has been changed. How can I do this?
我正在为ckeditor. 我想知道的是如何eventlistener在对话框中的选择框中添加一个，以在所选值发生更改时发出警报。我怎样才能做到这一点？
I've looked at the API and I've come across some useful information but it is not detailed enough. I can't make a connection between the API information and what I am trying to implement.
我查看了 API，发现了一些有用的信息，但不够详细。我无法在 API 信息和我尝试实现的内容之间建立联系。
回答by codewaggle
The select elements in the dialogs automatically fire a change event when they are changed. You can add an onChange function in the definition for the select element. Here's an example from the api:
对话框中的选择元素在更改时会自动触发更改事件。您可以在 select 元素的定义中添加一个 onChange 函数。这是来自 api 的示例：
onChange : function( api ) {
// this = CKEDITOR.ui.dialog.select
alert( 'Current value: ' + this.getValue() );
}
These pages have examples for creating definitions used by dialogs and ui elements:
Class CKEDITOR.dialog
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html
这些页面包含创建对话框和 ui 元素使用的定义的示例：
类 CKEDITOR.dialog
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html
Class CKEDITOR.dialog.definition
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html
类 CKEDITOR.dialog.definition
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html
Class CKEDITOR.dialog.definition.select
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.select.html
类 CKEDITOR.dialog.definition.select
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.select.html
If you would like to listen for a change to a select element from another location, you can create a listener that keys on the "dialogShow" event. Here's an example:
如果您想从另一个位置监听对 select 元素的更改，您可以创建一个监听“dialogShow”事件的监听器。下面是一个例子：
// Watch for the "dialogShow" event to be fired in the editor,
// when it's fired, perform this function
editor.on( 'dialogShow', function( dialogShowEvent )
{
// Get any data that was sent when the "fire" method fired the dialogShow event
var dialogShowEventData = dialogShowEvent.data;
// Get the dialog name from the array of data
// that was sent when the event was fired
var currentDialogName = dialogShowEventData._.name;
alert( currentDialogName );
// Create a reference to a particular element (ELEMENT-ID)
// located on a particular tab (TAB-ID) of the dialog that was shown.
var selectorObj = dialogShowEventData._.contents.TAB-ID.ELEMENT-ID;
// Watch for the "change" event to be fired for the element you
// created a reference to (a select element in this case).
selectorObj.on( 'change', function( changeEvent )
{
alert("selectorObj Changed");
});
});
You can check if the dialog you want to work with is the one that fired the "dialogShow" event. If so, you can create an object for the select element you're interested in and listen for a "change" event.
您可以检查要使用的对话框是否是触发“dialogShow”事件的对话框。如果是这样，您可以为您感兴趣的选择元素创建一个对象并侦听“更改”事件。
Note: the TAB-ID and ELEMENT-ID placeholders I used do not refer to the Id attribute of the element. The Id refers to the Id assigned in the dialog definition file. The Id attribute for the various elements are different each time the dialog is loaded.
注意：我使用的 TAB-ID 和 ELEMENT-ID 占位符不是指元素的 Id 属性。Id 是指在对话框定义文件中分配的 Id。每次加载对话框时，各种元素的 Id 属性都不同。
This page has some info on events:
Class CKEDITOR.event
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html
这个页面有一些关于事件的信息：
Class CKEDITOR.event
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html
Be Well, Joe
加油，乔
Answers to additional questions asked in comments:
对评论中提出的其他问题的回答：
Q1)Your event here is 'dialogShow', what other events are allowed? i.e are they pre-defined or user defined?
Q1)您这里的活动是“dialogShow”，还允许哪些其他活动？即它们是预定义的还是用户定义的？
A1)The 'dialogShow' event is predefined. You can look at the file containing the dialogs code in your CKEditor install directory or on the website:
ckeditor\_source\plugins\dialog\plugin.js
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_dialog_plugin.js.html
A1)'dialogShow' 事件是预定义的。您可以在 CKEditor 安装目录或网站上查看包含对话框代码的文件：
ckeditor\_source\plugins\dialog\plugin.js
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_dialog_plugin.js .html
If you search the file for 'fire', you'll see all the events that are fired for dialogs. The end of the file has definitions for the various events.
如果您在文件中搜索“fire”，您将看到为对话框触发的所有事件。文件末尾有各种事件的定义。
You can also define your own events to key on by using the "fire" method in your dialog code:
您还可以通过在对话框代码中使用“fire”方法来定义您自己的要按键的事件：
this.fire( 'yourEventNameHere', { yourPropertyOne : "propertyOneValue", yourPropertyTwo : "propertyTwoValue" } );
Then watch for it:
然后观察它：
editor.on( 'yourEventNameHere', function( eventProperties )
{
var propOne = eventProperties.data.yourPropertyOne; // propOne = "propertyOneValue"
var propTwo = eventProperties.data.yourPropertyTwo; // propTwo = "propertyTwoValue"
Do something here...
});
Q2)Can you explain the syntax dialogShowEventData._.name? I've seen it before but i don't know the significance, something to do with private variables?
Q2）你能解释一下语法dialogShowEventData._.name吗？我以前见过它，但我不知道它的重要性，与私有变量有关吗？
A2)For anyone wondering about the "._." syntax used in the CKEditor code, it's used to reduce the size of the code and replaces ".private." See this post by @AlfonsoML in the CKEditor forum:
http://cksource.com/forums/viewtopic.php?t=22982
A2)对于任何想知道“._”的人。CKEditor 代码中使用的语法，它用于减少代码的大小并替换“.private”。在 CKEditor 论坛中查看@AlfonsoML 的这篇文章：http://cksource.com/forums/viewtopic.php?t=22982
Q3)Where can i get more info on TAB-ID.ELEMENT-ID?
Q3)我在哪里可以获得更多关于 TAB-ID.ELEMENT-ID 的信息？
A3)The Tab-ID is the id that you assign to a particular tab (pane) of a dialog. ( see below: id : 'tab1', )
The Element-ID is the id that you assign to a particular element contained in a tab in your dialog. ( see below: id : 'textareaId', )
Look at this page: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#.add
It shows how you define the tabs and elements contained in a dialog window ( I added an example of a select element that fires a user defined event ):
A3)Tab-ID 是您分配给对话框的特定选项卡（窗格）的 ID。（见下文： id : 'tab1', ）
元素 ID 是您分配给对话框中选项卡中包含的特定元素的 ID。（见下文： id : 'textareaId', ）
看看这个页面：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#.add
它显示了如何定义包含在对话框窗口（我添加了一个触发用户定义事件的选择元素示例）：
var dialogDefinition =
contents : [
{
id : 'tab1',
label : 'Label',
title : 'Title',
expand : true,
padding : 0,
elements :
[
{
type : 'html',
html : '<p>This is some sample HTML content.</p>'
},
{
type : 'textarea',
id : 'textareaId',
rows : 4,
cols : 40
},
// Here's an example of a select element:
{
type : 'select',
id : 'sport',
label : 'Select your favourite sport',
items : [ [ 'Basketball' ], [ 'Baseball' ], [ 'Hockey' ], [ 'Football' ] ],
'default' : 'Football',
onChange : function( api ) {
// this = CKEDITOR.ui.dialog.select
alert( 'Current value: ' + this.getValue() );
// CKEditor automatically fires a "change" event here, but
// here's an example of firing your own event
this.fire( 'sportSelector', { sportSelectorPropertyOne : "propertyOneInfo" } );
}
]
}
],
Q4)Can you briefly explain what the above code is doing?
Q4)你能简单解释一下上面的代码是做什么的吗？
A4)See the original code, I've added comments.
A4)查看原始代码，我添加了注释。
