Question

我正在使用CKEditor的编辑功能，但是使用我自己的ui控件调用CKEditor的api来执行其命令。如，

var style = new CKEDITOR.style({
    element: 'span',
    attributes: {
        'style': 'font-size: 20px'
    }
});

editor.applyStyle(style);

设置所选文本的字体大小。

问题是我需要一种方法来了解当前所选文本的状态，以便我可以相应地更新控件。它大胆吗？然后粗体按钮应处于激活状态，单击它应删除粗体，而不是尝试再次添加。

有没有办法查询CKEditor当前所选文本的某些样式属性？就像tinymce.activeEditor.queryCommandValue('bold')在tinyMCE中的工作方式非常相似。

Answer 1

通常，创建按钮命令式三重奏的最佳方法就像在basicstyles插件中完成一样：

var style = new CKEDITOR.style( { ... } );

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

editor.addCommand( 'commandName', new CKEDITOR.styleCommand( style ) );

editor.ui.addButton( 'buttonName', {
    label: 'buttonLabel',
    command: 'commandName'
} );

此代码将处理所有事项 - 命令和按钮状态将根据选择更改进行更新。您还可以轻松获得命令状态：

editor.getCommand( 'commandName' ).state; // Returns on of CKEDITOR.TRISTATE_*.

但是，如果要直接查询样式的状态，则可以使用style.checkActive()方法：

style.checkActive( editor.elementPath(), editor );

您无需为此创建命令和按钮。

修改

CKEditor样式系统有其局限性。例如，您不能在样式中使用可变的字体大小。这意味着要检查当前的字体大小，您需要在DOM中快速搜索：

function getFontSize() {
    var span = editor.elementPath().contains( isFontSizeSpan );

    return span ? span.getStyle( 'font-size' ) : null;

    function isFontSizeSpan( el ) {
        return el.is( 'span' ) && el.getStyle( 'font-size' );
    }
}

现在，只需在editor#selectionChange事件监听器中使用此方法即可更新控件的值。

在CKEditor中获取选择的样式值

1 个答案:

修改