获取CKEditor中点击工具栏按钮的状态

Question

我试图禁用存在于我的 JSP 页面上、CKEditor 对话框之外的按钮。具体来说，当单击 CKEditor 工具栏上的 "Source" 按钮时，我想运行一些简单地禁用我网页上的 "Publish" 按钮的代码 - 如果出现以下情况，则不允许发布HTML 源代码可供编辑。我尝试了建议的事件委托 in this SO posting。除了使用 CKEditor Source 按钮，class 在完成其工作时从 "cke_button_off" 更改为 "cke_button_disabled" 到 "cke_button_on" 之外，这将起作用。 Manwal 在引用的 SO 发布中提供的代码查询特定 class 的 hassclass 以确定按钮是否启用。不错的干净解决方案，除了，正如我所说的，一旦单击按钮，就有这个中间 "cke_button_disabled" class 参与，所以我的代码中的检查总是失败，因为我不检查 "cke_button_disabled" class。我只关心设置的两个 css classes：cke_button_on 和 cke_button_off.

这就是我的困境。我想过等点击事件完成再查询已设置的cssclass，但是找不到办法查询cssclass 一旦 CKEditor Source 按钮点击完成。我已经尝试过 CKEditor 的 afterCommandExec 但那没有用。这是代码：

CKEDITOR.on('instanceReady', function (e) {
  var editor = e.editor;
  editor.on('afterCommandExec', handleAfterCommandExec);

function handleAfterCommandExec(event) {
    var commandName = event.data.name;
// For 'source' commmand:
    if (commandName == 'source') {
        var xxx = $(document.getElementById('cke_15'));
        if(xxx.hasClass('cke_button_off')) { //cke_button_off when 
                                             //     notdepressed 
            console.log("In handleAfterCommandExec::  
                                CKEDITOR SOURCE BUTTON CLICKED!!!!");
            $('#button-publishButton').attr("disabled", "true");
        }else {
            console.log("In handleAfterCommandExec:: 
                  CKEDITOR SOURCE BUTTON UNNNNACLICKED!!!!");
            $("#button-publishButton").removeAttr("disabled");
        }
    }
}

我也试过回调：

$(document).on('click', '.cke_button__source', function(){
   test();
});

function test() {
var xxx = $(document.getElementById('cke_15'));
if(xxx.hasClass('cke_button_off')) { //cke_button_off when not depressed 
                                     //cke_button_disabled
.....same code as previous

}

明白我的意思了吗？每次我的代码运行s hassclass 查询的结果总是 "cke_disabled"。任何人都可以建议一种查询 CKEditor "Source" 按钮 css 值的状态的方法来给我我正在寻找的东西 - button_on 或 button_off 吗？也许还有另一种方法可以等到 Source 按钮代码完成后再检查 css 值，或者，也许还有另一种方法可以在单击 CKEditor 工具栏按钮时禁用 JSP 页面上的按钮？感谢您的时间和帮助。

Answer 1

你不应该像这样用 JQuery 破解 CKEditor。到底是什么问题？它是捕获事件还是确定它是打开还是关闭？如果您在检测源代码模式是打开还是关闭时遇到问题，您应该能够通过编辑器模式属性获得它：

http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-mode

Answer 2

为了获取 CKEitor 工具栏中单击按钮的状态，您需要检查对象 event data 上的 event.data.name 和 event.data.command.previousState 属性以获取 afterCommandExec 事件.

在问题中使用你的例子，你的工作代码是：

CKEDITOR.on('instanceReady', function (e1) {
  e1.editor.on('afterCommandExec', function(e2) {
     if (e2.data.name === 'source' && e2.data.command.previousState === 1) {
        console.log('The source button has been unclicked!');
      }
  });
});

最后，如果你想这样做来恢复以前使用的样式，比如 body 标签上的 class 名称，它在转换后丢失，只需找到实例的框架并添加 class 手动。

setTimeout(function(){
   $(e1.editor.document.$).find('body').addClass('nightRider');
}, 100);

您需要延迟才能执行此操作，100 毫秒 总是足够的。

获取CKEditor中点击工具栏按钮的状态

Get the state of the clicked toolbar button in CKEitor

javascript

ckeditor