ckeditor 将事件处理程序添加到对话框元素

Question

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

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

Answer 1

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

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

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

---

如果您想监听来自另一个位置的选择元素的更改，您可以创建一个监听“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 属性都不同。

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

好好的， 乔

---

对 cme​​ts 中提出的其他问题的回答：

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的语法吗？我以前见过它，但我不知道它的意义，与私有变量有关吗？

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

---

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

A3) 选项卡 ID 是您分配给对话框的特定选项卡（窗格）的 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)看原代码，我加了cmets。

Answer 2

您可以使用编辑器的模糊事件，它会在窗口打开时触发。

   editor.on( 'blur', function( dialogShowEvent ) {
       //Add your logic here for the change event of select element
    });