如何通过JavaScript实现CKEditor 5内容变更检测与点击触发alert

我来帮你搞定这两个CKEditor 5的需求，直接上实用的方案和代码示例：

要捕获Balloon Editor内容区域的点击事件，最好用CKEditor官方提供的视图事件系统，避免直接操作DOM带来的冲突问题。具体步骤是在编辑器初始化完成后，监听编辑视图文档的click事件：

BalloonEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        // 监听编辑器内容区域的点击
        editor.editing.view.document.on('click', () => {
            alert('hello');
        });
    } )
    .catch( error => {
        console.error( error );
    } );

说明 #

editor.editing.view.document是CKEditor管理的编辑视图文档对象，监听它的click事件可以精准捕获用户在编辑器内容区域的点击操作，不会受到编辑器内部UI元素（比如工具栏）的干扰。如果页面上有多个Balloon Editor实例，只需要循环初始化每个编辑器并分别添加这个监听即可。

CKEditor 5专门提供了change:data事件，用于监听编辑器内容的实际变更（比如输入、删除、粘贴等操作），这个事件会过滤掉选区移动这类不修改内容的内部操作，比通用的change事件更精准：

BalloonEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        // 监听内容变更事件
        editor.model.document.on('change:data', () => {
            console.log('编辑器内容已更新');
            // 获取最新的编辑器内容
            const latestContent = editor.getData();
            console.log('最新内容:', latestContent);
            // 这里可以添加你的业务逻辑
        });
    } )
    .catch( error => {
        console.error( error );
    } );

说明 #

• change:data只在编辑器的实际内容发生修改时触发，适合用于内容保存、实时校验等场景；
• 如果需要监听所有模型变化（包括选区调整），可以改用change事件，但一般业务场景下change:data更实用；
• 同样，多实例场景下循环初始化并分别绑定事件即可。

内容的提问来源于stack exchange，提问作者El-Jus