我正在为 ckeditor 编写自定义对话框/插件。我想知道的是如何将 eventlistener 添加到对话框中的选择框，以便在所选值发生更改时发出警报。我怎样才能做到这一点？

我查看了 API，发现了一些有用的信息，但不够详细。我无法在 API 信息和我尝试实现的内容之间建立联系。

最佳答案

对话框中的选择元素在更改时会自动触发更改事件。您可以在 select 元素的定义中添加 onChange 函数。这是来自 api 的示例:

onChange : function( api ) {
  // this = CKEDITOR.ui.dialog.select
  alert( 'Current value: ' + this.getValue() );
}

这些页面有创建对话框和 ui 元素使用的定义的示例:
类 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

如果您想从另一个位置监听对选择元素的更改，您可以创建一个监听“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”事件的对话框。如果是这样，您可以为您感兴趣的选择元素创建一个对象并监听“更改”事件。

注意:我使用的 TAB-ID 和 ELEMENT-ID 占位符不是指元素的 Id 属性。 Id 是指在对话框定义文件中分配的 Id。每次加载对话框时，各种元素的 Id 属性都不同。

这个页面有一些关于事件的信息:
类 CKEDITOR.event
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html

body 健康， 乔

评论中提出的其他问题的答案:

Q1) 你这里的事件是'dialogShow'，还有哪些事件是允许的？即它们是预定义的还是用户定义的？

A1) 'dialogShow' 事件是预定义的。您可以在 CKEditor 安装目录或网站上查看包含对话框代码的文件:
ckeditor\_source\plugins\dialog\plugin.js
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_dialog_plugin.js.html

如果您在文件中搜索“fire”，您将看到为对话框触发的所有事件。文件末尾有各种事件的定义。

您还可以通过在对话代码中使用“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 吗？我以前见过它，但我不知道它的意义，与私有(private)变量有关吗？

A2) 对于任何想知道“._.”的人CKEditor 代码中使用的语法，它用于减少代码的大小并替换“.private”。请参阅@AlfonsoML 在 CKEditor 论坛中发表的这篇帖子:
http://cksource.com/forums/viewtopic.php?t=22982

Q3) 我在哪里可以获得有关 TAB-ID.ELEMENT-ID 的更多信息？

A3) Tab-ID 是您分配给对话框的特定选项卡( Pane )的 ID。 (见下文:id : 'tab1', )
Element-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) 你能简单解释一下上面的代码是做什么的吗？

A4)看原代码，我加了注释。

关于javascript - ckeditor 将事件处理程序添加到对话框元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7005592/