如何获取CKEditor 5的值？

Question

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

我使用了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>

我曾经通过以下方式从CKEditor之前的文本区域获取数据：

var text = $('textarea#editor').val();

通过以下方式设置数据：

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

但是我现在迷失了？我尝试了很多方法...什么是正确的方法？

- Latifa Khalid

---

分享更多的代码，如何创建 ckedit，创建实例并获取数据。 - Yogesh H Shenoy

Answer 1

你需要获取或保存编辑器创建的内容，然后使用getData()函数。你可以在创建时添加.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();

- itdoesntwork

---

myEditor.setData()用于设置编辑器中的数据。请注意，编辑器数据不会自动保存到文本区域，因此在提交表单之前，您应该执行类似于$('textarea#editor').html(myEditor.getData())的操作。 - Szymon Cofalik

我尝试了如下代码，但是出现了“无法读取未定义的getData属性”的错误。这是我的代码：var editorinstance; ClassicEditor.create(document.querySelector('#editor')) .then(editor => { editorinstance = editor; }).catch(error => { console.error(error); }); alert(editorinstance.getData()); - Scott

@Scott，你可能在创建时遇到了错误。请检查控制台以获取错误信息。你的文本区域id是“editor”吗？ - itdoesntwork

对于那些收到“getData()不是函数或未定义”的响应的人，这是因为您需要等待ckeditor加载完成才能获取其值。document.addEventListener("DOMContentLoaded", function(event){console.log(my_editor.getData())}); - Marek Bernád

Answer 2

我用另一种方法来使用 ckEditor。

第一件事是 - 我不想在每个使用编辑器的页面中都初始化 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>

在你的视图中使用它：

<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"/>

一些 CSS：

.ck-classic {
    display: none;
}

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

将微小的JS添加到布局中（以分离的JS文件形式添加更好）：

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()

- Rustem Bayetov

Answer 3

Actually, there are lots of ways to achieve this but this way is very short and optimized and also this setup can work perfectly with single as well as multiple <textarea>.

document.querySelectorAll('.ckeditor').forEach(e => {
  ClassicEditor
    .create(e)
    .then(editor => {
      editor.model.document.on('change:data', () => {
        e.value = editor.getData();
      });
    })
    .catch(error => {
      console.error(error);
    });
})

<script src="https://cdn.ckeditor.com/ckeditor5/29.0.0/classic/ckeditor.js"></script>

<!--Native Text Field-->
<textarea class="ckeditor"></textarea>

- Abhishek Singh

---

是的，这应该被接受并得到赞同。非常感谢你，伙计。 - Vipertecpro

Answer 4

使用开发者控制台，我发现这对我有效：

CKEDITOR.instances.(textarea_id).getData();

- Davie Overman

Answer 5

最简单的方法：

//global vars
var CKEditorArray = [];//CKEditor access array

//initialize function
function CKEditorInit(selector_name){
    ClassicEditor
        .create(document.querySelector(selector_name),{
            //some options
            toolbar: {
                items: [
                    'undo', 'redo', '|',
                    'fontSize', 'bold', 'italic', 'underline', '|',
                    'alignment', 'bulletedList', 'numberedList', '|',
                    'outdent', 'indent', '|',
                    'fontColor', 'fontBackgroundColor', '|',
                    'sourceEditing'
                ],
            },
        })
        .then(editor => {
            console.log(editor);
            CKEditorArray[selector_name] = editor;//save editor with selector name as index to array
        })
        .catch(error => {
            console.error(error);
        });
}

//then we need to init CKEditor, we just call function
CKEditorInit('#textarea-id');

//access to Editor like:
alert(CKEditorArray['#textarea-id'].getData());

- Enow