CKEditor：跟踪光标位置及颜色按钮插件同步更新的适配事件咨询

Got it, let's figure out how to get your CKEditor color button to sync with the selected text's color just like the font and font size dropdowns do. The focus event only fires once when the editor gets focus, which is why it's not working for dynamic selection changes—here's what you need to do instead:

1. Bind the Right Events #

Instead of relying on focus, you need two key events to track selection and content changes:

• selectionChange: Triggers every time the editor's selection (cursor position or selected text) changes—this is exactly what font/font size dropdowns use to update their state.
• contentDom: Ensures your selection listener is reattached if the editor's content DOM is rebuilt (e.g., switching between source and wysiwyg mode).

2. Track Cursor Position & Sync Color Button #

The core logic involves:

• Getting the current selection/cursor position
• Extracting the text color from the element under the cursor or selected text
• Updating the color button's dropdown selection and icon background to match that color

Here's a working code example that mirrors the font/font size dropdown behavior:

CKEDITOR.on('instanceReady', function(evt) {
    const editor = evt.editor;

    // Reattach selection listener if content DOM is rebuilt
    editor.on('contentDom', function() {
        editor.document.on('selectionChange', () => {
            syncColorButtonToSelection(editor);
        });
    });

    // Initialize button state on editor load
    syncColorButtonToSelection(editor);
});

function syncColorButtonToSelection(editor) {
    const selection = editor.getSelection();
    const range = selection.getRanges()[0];
    let activeColor = null;

    // Traverse up from the selection's ancestor to find the first element with a color style
    if (range) {
        let currentElement = range.getCommonAncestor();
        while (currentElement && currentElement.type !== 'document') {
            const elementColor = currentElement.getStyle('color');
            if (elementColor) {
                activeColor = elementColor;
                break;
            }
            currentElement = currentElement.getParent();
        }
    }

    // Update the text color command and button UI
    const textColorCmd = editor.getCommand('textColor');
    if (textColorCmd) {
        // Set the command's value (matches how font/font size sync works)
        textColorCmd.setValue(activeColor || '');

        // Sync the dropdown menu's selected state
        const colorButton = editor.ui.get('textColor');
        if (colorButton?.menu) {
            // Reset all menu items to unselected
            colorButton.menu.items.forEach(item => {
                item.setState(CKEDITOR.TRISTATE_OFF);
            });

            // Highlight the matching color item if it exists
            if (activeColor) {
                const matchingItem = colorButton.menu.items.find(item => item.commandParam === activeColor);
                if (matchingItem) {
                    matchingItem.setState(CKEDITOR.TRISTATE_ON);
                }
            }
        }
    }
}

3. Key Details to Note #

• Color Format Consistency: CKEditor might store colors in hex, RGB, or named formats—make sure the color value you extract matches the format used in your color button's menu items (adjust the getStyle('color') logic if needed).
• Blank Cursor Handling: When the cursor is in a blank area or text with no explicit color, the button resets to an unselected state, just like the font dropdown does when no specific font is applied.
• Command Value Sync: Setting textColorCmd.setValue() is critical—this is exactly how the font and font size dropdowns sync their state with the editor's selection.

内容的提问来源于stack exchange，提问作者BJ Patel