CKEditor5编辑器修改内容后无法获取最新值的问题求助

问题原因 #

CKEditor5采用数据驱动的架构设计，编辑器的实时编辑内容会存储在自身内部的数据模型中，不会自动同步到页面上的.editor DOM元素里。所以直接通过$('.editor').html()读取的始终是编辑器初始化时的原始内容。

解决方案 #

要获取编辑器的最新内容，需要通过CKEditor提供的官方API来操作：

1. 保存编辑器实例：在创建编辑器的then回调中，将编辑器实例存储到变量中（确保变量在点击事件的作用域内可访问）。
2. 调用getData()方法：在按钮点击事件里，使用编辑器实例的getData()方法获取实时更新的内容。

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.css" />

<body>
    <div id="addtext">button</div>
    <div id="inform">
        <div class="editor">
            <p>Hello from CKEditor 5!</p>
        </div>
    </div>
</body>

<script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.1.0/"
        }
    }
</script>

<script type="module">
    import {
        ClassicEditor,
        Essentials,
        Bold,
        Italic,
        Font,
        Paragraph
    } from 'ckeditor5';

    // 声明变量存储编辑器实例
    let editorInstance;

    ClassicEditor
        .create(document.querySelector('.editor'), {
            plugins: [Essentials, Bold, Italic, Font, Paragraph],
            toolbar: [
                'undo', 'redo', '|', 'bold', 'italic',
            ]
        })
        .then(editor => {
            // 保存编辑器实例
            editorInstance = editor;
        })
        .catch(error => {
            console.error(error);
        });

    $("#addtext").on("click", function () {
        // 通过实例的getData()方法获取最新内容
        const latestContent = editorInstance.getData();
        alert(latestContent);
    })
</script>

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