仅在选择有效文本的情况下启用CKEditor工具栏按钮？ [英] Enable CKEditor toolbar button only with valid text selection?

问题描述

我正在使用CKEditor插件来注释文本并添加空白注释，但是我希望仅当用户已经选择了一系列文本时才启用某些自定义工具栏按钮。每当用户键入内容或光标位于单点（而不是范围）上时，都应禁用按钮（及其相关命令）。

I'm working on a CKEditor plugin for annotating text and adding margin comments, but I'd like some of my custom toolbar buttons to be enabled only when the user has already selected a range of text. Whenever the user is typing, or the cursor is at a single-point (instead of a range), the buttons (and their associated commands) should be disabled.

I是一位非常有经验的插件作者，我花了大量时间在核心API文档中进行搜索，但我还没有发现任何看起来有帮助的东西。

I'm a pretty experienced plugin author, and I've spent a fair amount of time hunting through the core API docs, but I haven't found anything yet that looks like it'll help.

推荐答案

您的情况是有点棘手，因为选择更改事件无法在各个浏览器中很好地实现，所以FF是主要问题。

Your case is a little tricky, because selection change event is not well implemented across browsers, FF is the main problem.

在您的情况下，您将需要非常频繁地检查选择更改，因为您对所有选择更改都感兴趣，因此CKEditor selectionChange 不合适。

In your case you'll going to need check selection changes very frequently, as you're interested in all selection changes therefore CKEditor selectionChange won't fit it.

幸运的是，有一个 selectionCheck 编辑器中的事件触发频率更高并且更简单

Fortunately there's a selectionCheck event in editor that fires much more frequently and is implemented for FF.

解决方案：

这里有<$ c $我为解决您的问题而嘲笑的插件的c> init 方法。它将按照您的说明禁用/启用 Source 按钮。

Here you have init method of a plugin that I've mocked to solve your problem. It will disable / enable Source button the way you explained.

我已经在此功能中添加了限制功能，以使扩展范围较小的客户机器可以欣赏您的功能：）

I've already added throttling to this function, so that customers with less expansive machine can admire your feature :)

init: function( editor ) {
    // Funciton depending on editor selection (taken from the scope) will set the state of our command.
    function RefreshState() {
        var editable = editor.editable(),
            // Command that we want to control.
            command = editor.getCommand( 'source' ),
            range,
            commandState;

        if ( !editable ) {
            // It might be a case that editable is not yet ready.
            return;
        }

        // We assume only one range.
        range = editable.getDocument().getSelection().getRanges()[ 0 ];

        // The state we're about to set for the command.
        commandState = ( range && !range.collapsed ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED;

        command.setState( commandState );
    }

    // We'll use throttled function calls, because this event can be fired very, very frequently.
    var throttledFunction = CKEDITOR.tools.eventsBuffer( 250, RefreshState );

    // Now this is the event that detects all the selection changes.
    editor.on( 'selectionCheck', throttledFunction.input );

    // You'll most likely also want to execute this function as soon as editor is ready.
    editor.on( 'instanceReady', function( evt ) {
        // Also do state refresh on instanceReady.
        RefreshState();
    } );
}

这篇关于仅在选择有效文本的情况下启用CKEditor工具栏按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！