Выбранные элементы в диалоговых окнах автоматически инициируют событие изменения при их изменении.Вы можете добавить функцию onChange в определение для элемента select.Вот пример из API:
onChange : function( api ) {
// this = CKEDITOR.ui.dialog.select
alert( 'Current value: ' + this.getValue() );
}
На этих страницах есть примеры для создания определений, используемых диалогами и элементами пользовательского интерфейса: Класс 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".Вот пример:
// 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".Если это так, вы можете создать объект для интересующего вас элемента select и прослушать событие «change».
Примечание: заполнители TAB-ID и ELEMENT-ID, которые я использовал, не относятся кИдентификационный атрибут элемента.Идентификатор относится к идентификатору, назначенному в файле определения диалога.Атрибут Id для различных элементов различается при каждой загрузке диалога.
На этой странице есть некоторая информация о событиях: Класс CKEDITOR.event http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html
Будь здоров, Джо
Ответы на дополнительные вопросы, заданные в комментариях:
Q1) Ваше мероприятие здесь 'dialogShow«Какие другие события разрешены?то есть они предопределены или определены пользователем?
A1) Событие dialogShow предопределено.Вы можете посмотреть файл, содержащий код диалогов в вашем каталоге установки CKEditor или на веб-сайте:CKEditor \ _source \ Plugins \ Диалог \ plugin.jshttp://docs.cksource.com/ckeditor_api/symbols/src/plugins_dialog_plugin.js.html
Если вы ищете в файле «огонь», вы увидите все события, которые запускаются для диалогов.Конец файла содержит определения для различных событий.
Вы также можете определить свои собственные события для включения, используя метод "fire" в вашем диалоговом коде:
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?Я видел это раньше, но я не знаю значение, что-то делать с закрытыми переменными?
A2) Для всех, кто интересуется "._."синтаксис, используемый в коде CKEditor, он используется для уменьшения размера кода и заменяет «.private».Смотрите это сообщение @AlfonsoML на форуме CKEditor:http://cksource.com/forums/viewtopic.php?t=22982
Q3) Где я могу получить дополнительную информацию о TAB-ID.ELEMENT-ID?
A3) Tab-ID - это идентификатор, который вы назначаете для определенной вкладки (панели) диалога.(см. ниже: id: 'tab1',)Element-ID - это идентификатор, который вы назначаете определенному элементу, содержащемуся на вкладке в вашем диалоге.(см. ниже: id: 'textareaId',)Посмотрите на эту страницу: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#.add
Он показывает, как вы определяете вкладки и элементы, содержащиеся в диалоговом окне (я добавил пример элемента select, который запускает пользовательское событие):
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) Не могли бы вы кратко объяснить, что делает приведенный выше код?
A4) См. Оригинальный код, я добавил комментарии.