CKEditor如何向对话框元素添加事件处理程序

Question

CKEditor如何向对话框元素添加事件处理程序

javascriptckeditor

7

我正在为ckeditor编写自定义对话框/插件。我想知道如何向对话框中的选择框添加eventlistener，以便在所选值更改时发出警报。我该怎么做？

我已经查看了API，并找到了一些有用的信息，但它不够详细。我无法将API信息与我正在尝试实现的内容联系起来。

- oggiemc

2个回答

0

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

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

- Umesh Patil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- codewaggle · Accepted Answer

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

Class CKEDITOR.dialog.definition
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html

Class 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”事件的那个。如果是，您可以为您感兴趣的选择元素创建一个对象，并监听“change”事件。
注意：我使用的TAB-ID和ELEMENT-ID占位符不是指元素的Id属性。Id是指在对话框定义文件中分配的Id。各个元素的Id属性每次加载对话框时都不同。
此页面提供有关事件的一些信息：
Class CKEDITOR.event
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.event.html
祝好， Joe

对评论中提出的其他问题的答案：
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
它显示了如何定义对话框窗口中包含的选项卡和元素（我添加了一个触发用户定义事件的选择元素示例）：

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) 请看原始代码，我已经添加了注释。