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

Question

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

我查看了API,但我发现了一些有用的信息,但它不够详细.我无法在API信息和我想要实现的内容之间建立联系.

Answer 1

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

如果您想从另一个位置侦听对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属性.Id指的是对话框定义文件中指定的Id.每次加载对话框时,各种元素的Id属性都不同.

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

好吧,乔

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

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) 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)看到原始代码,我添加了评论.