pe:ckEditor粘贴内容不触发change事件，无法绑定至#{report.conclusion}

开发者阿泽

2026-8-3

解决pe:ckEditor粘贴内容无法绑定值及触发监听器的问题

PrimeFaces Extensions的pe:ckEditor默认change事件仅响应手动输入操作，粘贴内容时不会触发该事件，导致后端#{report.conclusion}值无法更新，ajax监听器也不会执行。以下是几种可行的解决方法：

监听CKEditor粘贴事件并手动触发change
通过CKEditor的API添加粘贴事件监听，在粘贴完成后手动触发组件的change事件，让PrimeFaces捕获到内容变化。修改代码如下：

<pe:ckEditor id="editor" width="100%" value="#{report.conclusion}"  
    toolbar="[['Bold', 'Italic', 'Strike'], ['TextColor'], ['Outdent', 'Indent'], ['NumberedList', 'BulletedList'], ['Center'], ['Table']]">
    <p:ajax event="change" update="btnSaveChanges" />
    <f:attribute name="widgetVar" value="editorWidget" />
</pe:ckEditor>

<h:outputScript>
    $(document).ready(function() {
        PF('editorWidget').getEditor().on('paste', function() {
            // 延迟触发change，确保粘贴内容已渲染完成
            setTimeout(function() {
                PF('editorWidget').getEditor().fire('change');
            }, 100);
        });
    });
</h:outputScript>

核心逻辑是通过widgetVar获取编辑器实例，监听paste事件，粘贴后延迟触发change事件，强制同步内容到后端。

添加blur事件作为补充
如果不需要实时触发更新，可以添加blur事件的ajax监听，当编辑器失去焦点时自动同步值，粘贴后点击编辑器外部即可触发：

<pe:ckEditor id="editor" width="100%" value="#{report.conclusion}"  
    toolbar="[['Bold', 'Italic', 'Strike'], ['TextColor'], ['Outdent', 'Indent'], ['NumberedList', 'BulletedList'], ['Center'], ['Table']]">
    <p:ajax event="change" update="btnSaveChanges" />
    <p:ajax event="blur" update="btnSaveChanges" />
</pe:ckEditor>