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

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

---

如果您想监听来自另一个位置的选择元素的变化，你可以创建一个侦听器的“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 \ plugins \ dialog \ plugin。js
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_dialog_plugin.js.html

如果您搜索'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”。看到这个帖子由@AlfonsoML在CKEditor的论坛：
http://cksource.com/forums/viewtopic.php?t=22982

---

Q3）我在哪里可以得到TAB-ID.ELEMENT-ID的详细信息？

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