CKEditor selectionChange事件失效求助：Flask项目选中文本无法同步到文本域

问题原因 #

原代码依赖的selectionChange事件，在CKEditor 4中默认仅在选择操作结束后（比如鼠标松开后点击其他区域、浏览器焦点切换）才会触发，无法在鼠标拖动选中文本的过程中实时响应。直接绑定编辑器实例的mouse事件也无效，因为CKEditor的编辑区域是独立的iframe，实例级别的事件无法穿透到内部可编辑内容区。

解决方案 #

通过监听编辑器内部可编辑区域的鼠标、键盘事件，实现实时检测选中内容并同步：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CKEditor 选中文本同步示例</title>
    <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
</head>

<body>
    <textarea id="editor1" name="editor1"></textarea>
    <br>
    <textarea id="selectedTextDisplay" name="selectedTextDisplay" readonly></textarea>

    <script>
        CKEDITOR.replace('editor1');
        
        function syncSelectedText() {
            const editor = CKEDITOR.instances.editor1;
            const selectedText = editor.getSelection().getSelectedText();
            document.getElementById('selectedTextDisplay').value = selectedText;
        }

        // 等待编辑器完全初始化后绑定事件
        CKEDITOR.instances.editor1.on('instanceReady', function(evt) {
            const editor = evt.editor;
            const editable = editor.editable();

            // 鼠标松开时同步选中内容
            editable.attachListener(editable, 'mouseup', syncSelectedText);
            
            // 鼠标拖动过程中实时同步（仅当有选中内容时触发）
            editable.attachListener(editable, 'mousemove', function() {
                if (editor.getSelection().getType() !== CKEDITOR.SELECTION_NONE) {
                    syncSelectedText();
                }
            });

            // 键盘选中文本时同步（如Shift+方向键）
            editable.attachListener(editable, 'keyup', syncSelectedText);

            // 保留原selectionChange事件作为兜底
            editor.on('selectionChange', syncSelectedText);
        });
    </script>
</body>
</html>

代码说明 #

• instanceReady事件：确保编辑器初始化完成后再操作内部可编辑区域，避免元素未加载导致的绑定失败。
• mouseup：处理鼠标点击选中、拖动松开后的内容同步。
• mousemove：在鼠标拖动选中文本的过程中实时检测，加入选中状态判断避免无意义的频繁触发。
• keyup：覆盖通过键盘操作选中文本的场景（比如Shift+方向键、Ctrl+A全选等）。
• 保留selectionChange：作为兜底机制，处理部分特殊场景下的选择变化（如右键菜单操作选中内容）。

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