如何获得 CKEditor 5 的价值？

Posted 2023-02-16

【中文标题】如何获得 CKEditor 5 的价值？

【英文标题】：How to get value of CKEditor 5?

【发布时间】：2018-04-11 08:35:31

【问题描述】：

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

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

<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 之前从 textarea 中获取数据的：

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

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

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

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

【问题讨论】：

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

【参考方案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();

【讨论】：

... 而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", function(event)console.log(my_editor.getData()));

【参考方案2】：

我使用另一种方式来使用 ckEditors。

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

第二件事是 - 有时我需要按名称访问 ckEditors。

所以，这是我的观点：

添加到您的布局中：

<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 添加到 Layout（添加为单独的 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()

【参考方案3】：

实际上，有很多方法可以实现这一点，但这种方法非常简短且经过优化，而且这种设置可以完美地与单个和多个 <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>

【讨论】：

是的，这应该被接受和赞成。谢谢很多人

【参考方案4】：

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

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

【参考方案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());