检测CK编辑器样式菜单何时打开

Detect when CK Editor Styles menu is opened?

本文关键字：何时打 菜单 样式 CK 编辑器 检测      更新时间：2023-09-26

当CK编辑器中的样式菜单打开时，是否有任何方法可以获得事件?

它在页面中创建了一个iFrame，当iFrame打开时，我需要在它的body标签中注入一个类名....

你不能在iFrame之外的javascript中这样做。您必须将自定义脚本集成到CK编辑器iFrame中。

这是iFrame的规则，你不能在iFrame文档中绑定事件。同样，在iFrame内部也不可能绑定父文档
中的事件。

找不到一个好的方法来做到这一点(事件，回调，CK中的任何类型的API)，但找到了一个适合我们需要的方法(使用下划线来包装CK函数)。

它有点粗糙，但工作....

    CKEDITOR.on( 'instanceReady', function( event ) {
          //Expose a class on the styles menu so we can scope the styles and target items that are in the menu
          var Styles = event.editor.ui.instances.Styles;
          Styles.onOpen = _.wrap(Styles.onOpen, function(onOpen) { 
            //Trigger the original onOpen method
            _.bind(onOpen, Styles)();
            //Now find the iFrame and inject a class to the body
            var $iframe = $(".cke iframe");
            if($iframe) {
              var addClass=function() {
                $iframe.contents().find('body').addClass('slide styles-menu');
              }
              if ($iframe.contents().find('body').children().length==0) {
                $iframe.one('load', addClass);
              } else {
                addClass();
              }
            }
          });
相关文章：