Question

我已向CKEditor内嵌添加了一个自定义插件，以执行粗体操作。该插件按预期工作，但按钮的开/关状态不起作用。

执行命令时，其状态始终为TRISTATE_OFF。

CKEDITOR.plugins.add( 'customBold', {
    requires: 'toolbar',
    icons: 'bold',
    hidpi: false, 
    init: function( editor ) {


        var boldCommand = {
            exec: function( editor ) {  
                document.execCommand('bold', false, null);              
            }
        }

        editor.addCommand( 'bold', boldCommand );   

        editor.ui.addButton && editor.ui.addButton( 'Bold', {
                label:  'bold',
                command: 'bold',
                toolbar: 'basic,10'
        });    

       editor.setKeystroke( [
            [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ]                
       ]);
    }
});

当用户选择粗体文本时，我想在工具栏中切换粗体样式。

Answer 1

您需要调用command.setState方法，该方法将设置命令的状态，然后自动影响相关按钮的状态。

但是，您需要知道何时调用该方法（当状态发生变化时）。像basicstyle插件这样的CKEditor插件使用了CKEditor的styles system，让他们easily listen更改了样式状态：

editor.attachStyleStateChange( style, function( state ) {
    !editor.readOnly && editor.getCommand( commandName ).setState( state );
} );

然而，您尝试使用本机命令，我强烈建议不要这样做。 CKEditor实现自己的样式系统及其自己的命令并非巧合。

Answer 2

我纯粹回答这个问题，因为当我在寻找如何将样式应用到工具栏上的CKEditor自定义插件按钮时，这个结果不断出现。

这最终变得相当简单，虽然不是特别优雅。

目前，我自己处理CKEditor按钮（在plugin.js文件之外）。这是因为我使用CKEditor动态创建编辑器实例，它似乎不太适合这样做，而且我经常需要覆盖函数。

以下是我如何将一种风格应用于“活跃”的方式。 myplugin按钮操作编辑器中的按钮：

class Foo
  def one(param)
    puts param
  end
end

class Bar
  def two(param, &callback)
    callback.call(param)
  end
end

f = Foo.new
b = Bar.new
b.two('hi') {|param| puts param } # with a block
b.two('hi', &f.method(:one)) # with a Method object

}）;

这样，您只需将样式应用于按钮，而无需切换实际的button.png

如何为CKEditor自定义按钮设置开关状态

2 个答案: