如何点击页面外部按钮向CKEditor5插入内容并避免编辑器重复？

你的问题根源是每次AJAX请求成功后都重复调用ClassicEditor.create()，这会导致页面生成多个编辑器实例。正确的做法是提前初始化编辑器并保存实例，后续直接复用该实例进行内容插入操作。

步骤1：提前初始化并保存编辑器实例 #

在页面加载阶段只执行一次编辑器初始化，把实例保存到全局/模块级变量中：

// 全局变量存储编辑器实例
let editorInstance;

// 页面初始化时创建编辑器，仅执行一次
ClassicEditor
.create( document.querySelector( '.ckeditor' ), {
    language: 'he',
} )
.then( editor => {
    editorInstance = editor; // 保存实例供后续使用
} )
.catch( error => {
    console.error( error );
} );

步骤2：修改AJAX回调复用实例插入内容 #

在按钮触发的AJAX成功回调中，直接使用已保存的实例操作：

success: function (data) {
    // 先确认编辑器实例已初始化完成
    if (editorInstance) {
        editorInstance.model.change( writer => {
            const insertPosition = editorInstance.model.document.selection.getFirstPosition();
            writer.insertText(data, insertPosition );
        } );
    } else {
        console.error('编辑器尚未初始化完成，请稍后重试');
    }
}

额外说明：插入富内容 #

如果需要插入的是HTML富文本而非纯文本，可改用insertContent方法：

editorInstance.data.insertContent( data );

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