Question

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

我查看了API并且我遇到了一些有用的信息，但它不够详细。我无法在API信息和我想要实现的内容之间建立联系。

Answer 1

对话框中的选择元素会在更改时自动触发更改事件。您可以在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

如果您想从另一个位置侦听对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元素创建一个对象，并监听“更改”事件。

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

此页面包含有关事件的一些信息：
班级CKEDITOR.event
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html

好吧，乔

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

Q1）您的活动是'dialogShow'，还允许其他活动？即它们是预先定义的还是用户定义的？

A1）'dialogShow'事件已预定义。您可以在CKEditor安装目录或网站上查看包含对话框代码的文件：
CKEditor的\ _source \插件\对话\ 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吗？我之前见过它，但我不知道它的意义，与私有变量有什么关系？

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

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

A3） Tab-ID是您分配给对话框的特定选项卡（窗格）的ID。（见下文：id：'tab1'，）
Element-ID是您分配给对话框中选项卡中包含的特定元素的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）查看原始代码，我添加了评论。

ckeditor将事件处理程序添加到dialog元素

1 个答案: