在CK编辑器中单击按钮时显示警报 [英] Display alert when a button is clicked in CK Editor

问题描述

以下是代码：

<$>

如何按ckeditor显示警报？ （）函数（）{
editor.on（CKEDITOR。）（）。code $ $（document）.ready（function（）{
$（。cke_button__bold cke_button__bold，CKEDITOR.cke_button_on）;

函数handleAfterCommandExec（evt）{
var commandName = CKEDITOR.command.cke_button__bold;
//对于'bold'命令
if（commandName =='cke_button__on'）
{
alert（Bold button pressed！）;

}
}
}）;
}）;

解决方案

活动代表团

活动代表团让我们将一个事件监听器附加到一个
父元素，该元素将触发与
选择器匹配的所有后代，无论这些后代是现在存在还是添加到未来的
中。

  $（document）.ready（function（）{
 $（document）.on（' （$（this）.hasClass（'cke_button_on'））//检查是否只启用
 {
 alert（Click事件仅在启用时才发生）; 
} 
}）; 
}）; 
  

更新了DEMO

How can I display an alert with ckeditor if a button is pressed?

Here's the code:

$(document).ready(function () {
      $(".cke_button__bold").click(function () {
          editor.on("CKEDITOR.cke_button__bold",CKEDITOR.cke_button_on);

          function handleAfterCommandExec(evt){
                var commandName = CKEDITOR.command.cke_button__bold;
                // For 'bold' commmand
                if (commandName == 'cke_button__on')
                {
                    alert("Bold button pressed!");

                }
         }
     });
});

解决方案

event delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$(document).ready(function () {
      $(document).on('click','.cke_button__bold',function () {
         if($(this).hasClass('cke_button_on'))//checking for enable only
         {
           alert("Click event occure when only enable");
         }
     });
});

Updated DEMO

这篇关于在CK编辑器中单击按钮时显示警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！