ckeditor向对话框元素添加事件处理程序 [英] ckeditor add event handler to dialog element
问题描述
我为 ckeditor 写了一个自定义对话框/插件。我想知道的是如何添加一个 eventlistener 到对话框中的选择框，以提醒选定的值被更改。我该怎么办？
I'm writing a custom dialog/plugin for ckeditor. What I want to know is how I can add an eventlistener to a select box in the dialog, to alert when the selected value has been changed. How can I do this?
我查看了API，我已经得到一些有用的信息，但它不够详细。我无法在API信息和我要实现的API信息之间建立连接。
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.
推荐答案
对话框中的选择元素当更改事件更改时自动触发更改事件。您可以在select元素的定义中添加onChange函数。下面是一个来自api的例子：
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:
onChange : function( api ) {
// this = CKEDITOR.ui.dialog.select
alert( 'Current value: ' + this.getValue() );
}
这些页面有创建dialogs和ui元素使用的定义的例子：
CKEDITOR.dialog类
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html
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
类CKEDITOR.dialog.definition
http://docs.cksource.com/ckeditor_api/ symbols / CKEDITOR.dialog.definition.html
类CKEDITOR.dialog.definition.select
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition .select.html
如果您要监听来自其他位置的select元素的变更，您可以创建一个监听器，在dialogShow事件上键入。下面是一个例子：
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:
// 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");
});
});
您可以检查要使用的对话框是否是触发dialogShow事件的对话框。如果是，您可以为感兴趣的选择元素创建一个对象，并监听更改事件。
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.
注意：TAB-ID和ELEMENT-我使用的ID占位符不引用元素的Id属性。 Id是指在对话框定义文件中分配的Id。
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.
此页面有一些关于事件的信息：
CKEDITOR.event类别
http：//docs.cksource。 com / ckeditor_api / symbols / CKEDITOR.event.html
This page has some info on events:
Class CKEDITOR.event
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html
好吧，
Joe
Be Well, Joe
对评论中提出的其他问题的回答：
Answers to additional questions asked in comments:
Q1） 'dialogShow'，允许什么其他事件？即它们是预定义的还是用户定义的？
Q1) Your event here is 'dialogShow', what other events are allowed? i.e are they pre-defined or user defined?
A1）dialogShow事件是预定义的。您可以在CKEditor安装目录或网站上查看包含对话框代码的文件：
ckeditor\_source\plugins\dialog\\\\\插件js
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_dialog_plugin.js.html
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
如果您在文件中搜索fire，您将看到为对话框触发的所有事件。
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:
this.fire( 'yourEventNameHere', { yourPropertyOne : "propertyOneValue", yourPropertyTwo : "propertyTwoValue" } );
然后注意：
editor.on( 'yourEventNameHere', function( eventProperties )
{
var propOne = eventProperties.data.yourPropertyOne; // propOne = "propertyOneValue"
var propTwo = eventProperties.data.yourPropertyTwo; // propTwo = "propertyTwoValue"
Do something here...
});
Q2）您解释语法 dialogShowEventData ._。name ？我以前看过它，但我不知道的意义，与私有变量有关的事情。
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?
A2）任何想知道._的人。在CKEditor代码中使用的语法，它用于减少代码的大小，并替换.private。请在CKEditor论坛中通过@AlfonsoML查看此帖子：
http://cksource.com /forums/viewtopic.php?t=22982
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
Q3）我可以得到更多的信息TAB-ID.ELEMENT-ID？
Q3) Where can i get more info on TAB-ID.ELEMENT-ID?
A3） Tab-ID是您分配给对话框的特定标签（窗格）的标识。 （见下面：id：'tab1'，）
Element-ID是您分配给包含在对话框中某个选项卡中的特定元素的id。 （见下面：id：'textareaId'，）
查看此页面： http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#.add
它显示如何定义对话框中包含的选项卡和元素窗口（我添加了一个选择元素的示例，触发用户定义的事件）：
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 ):
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）您能简要解释上述代码的作用吗？
Q4) Can you briefly explain what the above code is doing?
A4）查看原始代码，我已添加评论。
A4) See the original code, I've added comments.
这篇关于ckeditor向对话框元素添加事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
