下拉选项切换时无法替换CKEditor内容问题求助

你的问题核心在于：CKEditor初始化后，原<textarea>会被隐藏并替换为CKEditor专属的编辑容器，你通过$("#model-body")查找的元素仅存在于原textarea的初始值中，并非编辑器实际渲染的活跃DOM元素，所以修改操作不会生效。

解决方案：用CKEditor官方API操作内容 #

根据你使用的CKEditor版本（从classic-editor的ID判断，大概率是CKEditor 5，以下同时提供CKEditor 4的兼容写法），按以下方式修改代码：

针对CKEditor 5（经典编辑器） #

$(document).ready(function() {
    $("select.modele").change(function() {
        var modele = $(this).children("option:selected").val();
        // 获取CKEditor实例
        const editor = ClassicEditor.instances['classic-editor'];
        
        if (editor) {
            // 1. 获取编辑器当前的HTML内容
            let currentContent = editor.getData();
            // 2. 创建临时容器解析内容，避免直接操作编辑器DOM
            const tempContainer = document.createElement('div');
            tempContainer.innerHTML = currentContent;
            // 3. 找到目标元素并修改内容
            const modelBody = tempContainer.querySelector('#model-body');
            if (modelBody) {
                modelBody.innerHTML = "<span>Un élément span</span>";
                // 4. 将修改后的内容同步回编辑器
                editor.setData(tempContainer.innerHTML);
            }
        }
        
        alert(modele);
    });
});

针对CKEditor 4 #

如果你的项目使用CKEditor 4，API写法略有不同：

$(document).ready(function() {
    $("select.modele").change(function() {
        var modele = $(this).children("option:selected").val();
        // 获取CKEditor实例
        const editor = CKEDITOR.instances['classic-editor'];
        
        if (editor) {
            // 直接通过编辑器内置的文档对象查找目标元素
            const modelBody = editor.document.getById('model-body');
            if (modelBody) {
                // 修改元素内容
                modelBody.setHtml("<span>Un élément span</span>");
            }
        }
        
        alert(modele);
    });
});

关键提示 #

• 不要直接操作原<textarea>内的DOM元素，CKEditor初始化后会完全接管编辑区域，原textarea仅作为初始值存储和提交时的内容同步载体。
• 必须通过CKEditor提供的官方API修改内容，才能确保编辑器正确识别变更并同步到内部状态。

内容的提问来源于stack exchange，提问作者koffi déo gratias Woblesse