添加AJAX代码后，CKEditor无法正常工作_在jquery中添加ajax后，OnClick无法正常工作_ajax查询无法正常工作 - 腾讯云开发者社区

添加AJAX代码后，CKEditor无法正常工作

在使用AJAX与CKEditor一起工作时，可能会遇到一些问题，因为CKEditor的实例化和初始化可能与AJAX请求的执行时机不匹配。以下是一些常见的解决方案和最佳实践，以确保CKEditor在AJAX环境中正常工作：

1. 确保CKEditor实例在DOM加载后创建

如果你在AJAX请求完成后动态添加了包含CKEditor的HTML内容，你需要确保在内容插入DOM后再初始化CKEditor实例。

// 假设这是你的AJAX回调函数
function onAjaxSuccess(response) {
    // 假设response包含CKEditor的HTML内容
    $('#editor-container').html(response);

    // 初始化CKEditor
    ClassicEditor
        .create(document.querySelector('#editor-container .ck-editor__editable'))
        .then(editor => {
            console.log('CKEditor is ready to use!', editor);
        })
        .catch(error => {
            console.error(error);
        });
}

2. 销毁旧的CKEditor实例

如果你在AJAX请求中替换了包含CKEditor的元素，你需要先销毁旧的CKEditor实例，然后再创建新的实例。

function onAjaxSuccess(response) {
    // 销毁旧的CKEditor实例（如果有）
    ClassicEditor.instances.forEach(instance => instance.destroy());

    // 插入新的HTML内容
    $('#editor-container').html(response);

    // 初始化新的CKEditor实例
    ClassicEditor
        .create(document.querySelector('#editor-container .ck-editor__editable'))
        .then(editor => {
            console.log('CKEditor is ready to use!', editor);
        })
        .catch(error => {
            console.error(error);
        });
}

3. 使用事件监听器

你可以使用事件监听器来确保CKEditor在DOM更新后初始化。

$(document).on('DOMNodeInserted', '#editor-container', function() {
    ClassicEditor
        .create(document.querySelector('#editor-container .ck-editor__editable'))
        .then(editor => {
            console.log('CKEditor is ready to use!', editor);
        })
        .catch(error => {
            console.error(error);
        });
});

4. 检查CKEditor版本兼容性

确保你使用的CKEditor版本与你的项目中的其他库和框架兼容。

5. 调试信息

如果上述方法都无法解决问题，可以尝试启用CKEditor的调试模式，查看控制台中的详细错误信息。

ClassicEditor
    .create(document.querySelector('#editor-container .ck-editor__editable'), {
        debug: true
    })
    .then(editor => {
        console.log('CKEditor is ready to use!', editor);
    })
    .catch(error => {
        console.error(error);
    });

示例代码

以下是一个完整的示例，展示了如何在AJAX请求完成后初始化CKEditor：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CKEditor with AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/31.0.0/classic/ckeditor.js"></script>
</head>
<body>
    <div id="editor-container"></div>

    <script>
        function loadEditorContent() {
            $.ajax({
                url: 'your-endpoint.php', // 替换为你的AJAX端点
                method: 'GET',
                success: onAjaxSuccess,
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', error);
                }
            });
        }

        function onAjaxSuccess(response) {
            // 销毁旧的CKEditor实例（如果有）
            ClassicEditor.instances.forEach(instance => instance.destroy());

            // 插入新的HTML内容
            $('#editor-container').html(response);

            // 初始化新的CKEditor实例
            ClassicEditor
                .create(document.querySelector('#editor-container .ck-editor__editable'))
                .then(editor => {
                    console.log('CKEditor is ready to use!', editor);
                })
                .catch(error => {
                    console.error(error);
                });
        }

        $(document).ready(function() {
            loadEditorContent();
        });
    </script>
</body>
</html>