Javascript 如何获取CKEditor 5的值？

我希望能够返回CKEditor textarea的值，并在其中写入我的文本

我使用了CKEditor 5 CDN。首先，这是我的文本区代码，它工作正常

<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.1/classic/ckeditor.js"></script>

<textarea class="inputStyle" id="editor" name="content" placeholder="Write your email.."></textarea>
<script>ClassicEditor.create(document.querySelector('#editor')).catch( error => { console.error( error );  } ); </script>

并通过以下方式设置数据：

$('textarea#editor').html("");

---

但我现在迷路了？我试过很多方法。。。正确的方法是什么？

您需要获取或保存创建的编辑器，然后使用该函数。 您可以在创建时添加

.then（）

，以保存编辑器

    var myEditor;

    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => {
            console.log( 'Editor was initialized', editor );
            myEditor = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );

然后使用

myEditor.getData();

---

我使用另一种方法来处理编辑器

第一件事是-我不想在我使用编辑器的每个页面中初始化ckEditor

第二件事是——有时我需要按名称访问CKeditor

因此，我的观点是：

添加到布局中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>

将tiny JS添加到布局（添加为单独JS文件的更好方法）：

---

使用开发人员控制台，我发现这对我来说是可行的：

---

CKEDITOR.instances.（textarea_id）.getData（）

分享更多代码，如何创建ckedit，创建实例和获取数据。。。而

myEditor.setData（）

用于在编辑器中设置数据。请记住，编辑器数据不会自动保存到textarea，因此在提交表单之前，您应该执行类似于

$（'textarea#editor'）.html（myEditor.getData（））

的操作。我尝试了如下操作，得到了“无法读取未定义的getData属性。这是我的代码：var editorinstance；ClassicEditor.create”（document.querySelector（'#editor'））.then（editor=>{editorinstance=editor；}）.catch（error=>{console.error（error）；}）；alert（editorinstance.getData（））；@Scott您可能在创建时出错。检查控制台是否有错误。您的文本区域id=“editor“？？对于那些得到响应的人来说，getData（）不是函数或未定义，这是因为您需要等待ckeditor加载才能获得其值。

document.addEventListener（“DOMContentLoaded”，函数（事件）{console.log（my_editor.getData（））}；

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>

<input type="text" name="tbxQuestion" class="ck-classic"/>
<input type="text" name="tbxAnswer1" class="ck-classic-min"/>
<input type="text" name="tbxAnswer2" class="ck-classic-min"/>
<input type="text" name="tbxAnswer3" class="ck-classic-min"/>

.ck-classic {
    display: none;
}

.ck-classic-min {
    display: none;
}

const ckEditorClassicOptions = {
    toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'link', 'insertTable', 'undo', 'redo'],
    heading: {
        options: [
            { model: 'paragraph', title: 'Параграф' },
            //{ model: 'heading1', view: 'h1', title: 'Heading 1' },
            { model: 'heading2', view: 'h2', title: 'Заголовок 2' },
            { model: 'heading3', view: 'h3', title: 'Заголовок 3' },
            { model: 'heading4', view: 'h4', title: 'Заголовок 4' },
            { model: 'heading5', view: 'h5', title: 'Заголовок 5' }
        ]
    }
};

const ckEditorClassicOptionsMin = {
    toolbar: ['bold', 'italic']
};

var allCkEditors = [];
$(document).ready(function() {
    // Initialize All CKEditors
    allCkEditors = [];

    var allHtmlElements = document.querySelectorAll('.ck-classic');
    for (var i = 0; i < allHtmlElements.length; ++i) {
        ClassicEditor
            .create(allHtmlElements[i], ckEditorClassicOptions)
            .then(editor => {
                allCkEditors.push(editor);
            })
            .catch(error => {
                console.error(error);
            });
    }

    allHtmlElements = document.querySelectorAll('.ck-classic-min');
    for (var j = 0; j < allHtmlElements.length; ++j) {
        ClassicEditor
            .create(allHtmlElements[j], ckEditorClassicOptionsMin)
            .then(editor => {
                allCkEditors.push(editor);
            })
            .catch(error => {
                console.error(error);
            });
    }

});

function ckEditor(name) {
    for (var i = 0; i < allCkEditors.length; i++) {
        if (allCkEditors[i].sourceElement.id === name) return allCkEditors[i];
    }

    return null;
}

ckEditor("tbxQuestion").getData()