如何在jQuery的keyup事件中弹出CKEditor的内容？

你遇到的核心问题是：CKEditor初始化后会把原<textarea>隐藏，用户实际操作的是CKEditor生成的富文本编辑区域（通常是iframe或div），所以你绑定在原textarea上的keyup事件根本不会被触发。

要实现需求，得用CKEditor自身的事件系统监听输入，而非jQuery监听原textarea。下面是两种可行方案：

方案1：自动初始化时监听实例就绪事件 #

如果你保持用class="ckeditor"让CKEditor自动初始化，可以通过监听instanceReady事件拿到编辑器实例，再绑定keyup事件：

<script src="//cdn.ckeditor.com/4.9.1/standard/ckeditor.js"></script>
<script src="<?php echo base_url(); ?>resource/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 等待CKEditor完成实例初始化
    CKEDITOR.on('instanceReady', function(event) {
        const editor = event.editor;
        // 绑定编辑器的keyup事件
        editor.on('keyup', function() {
            // 获取编辑器的HTML内容
            const editorContent = editor.getData();
            alert(editorContent);
        });
    });
});
</script>
<textarea class="ckeditor" name="question" id="question"></textarea>

方案2：手动初始化并配置事件 #

这种方式更可控，直接手动初始化编辑器并在配置里绑定事件，不需要依赖class="ckeditor"：

<script src="//cdn.ckeditor.com/4.9.1/standard/ckeditor.js"></script>
<script src="<?php echo base_url(); ?>resource/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 手动初始化CKEditor并绑定keyup事件
    CKEDITOR.replace('question', {
        on: {
            keyup: function() {
                // this指向当前编辑器实例
                alert(this.getData());
            }
        }
    });
});
</script>
<textarea name="question" id="question"></textarea>

补充说明 #

• editor.getData()是CKEditor官方提供的获取内容的方法，能拿到完整的HTML格式内容，比直接操作原textarea更可靠。
• 如果偶尔出现获取内容不是最新的情况，可以在keyup事件里加个极短延迟（比如setTimeout(() => { ... }, 50)），确保编辑器内容已更新。

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