javascript CKEDITOR 5多个示例

dgsult0t 于 2023-03-21 发布在 Java

关注(0)|答案(2)|浏览(189)

我想动态初始化CKEDITors，然后对每个CKEDITors使用setData()函数。我尝试了以下方法：CKEditor 5 – get editor instances但我得到错误：
无法读取未定义的属性“setData”

const editors = {}; 
function createEditor( elementId ) {
    return ClassicEditor
        .create( document.getElementById( elementId ) )
        .then( editor => {
        editors[ elementId ] = editor;
    } )
        .catch( err => console.error( err.stack ) );
}

$(document).ready( function() {
    createEditor( 'editor1' );
    createEditor( 'director1' );

    console.log(editors.editor1.setData('test')); //error message
});

我能做我想做的事吗？如果可以，我该怎么做？

JavaScript

来源：https://stackoverflow.com/questions/56324446/ckeditor-5-multiple-instances

2条答案

按热度按时间

dwbf0jvd1#

请参见：https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready。
只有在编辑器数据完全加载时才能设置它。虽然有一个ready事件，正如你在链接中看到的那样，但更好的地方是create方法返回的promise。你的代码应该如下所示：

var editors = [];   
function createEditor( elementId, data ) {
    return ClassicEditor
        .create( document.querySelector( '#' + elementId ) )
        .then( editor => {
        editors[ elementId ] = editor;
        editor.setData( data ); // You should set editor data here
    } )
        .catch( err => console.error( err ) );
}

$(document).ready( function() {
    createEditor( 'editor', 'test' );
    createEditor( 'director1', 'test' );
});

赞(0）回复(0）举报 2023-03-21

jtw3ybtb2#

您可以将class设置为每个文本区域，例如ckeditor

<textarea class="ckeditor"></textarea>

接下来，在脚本部分中，按类CKEDitor选择所有元素，并为每个人使用init编辑器

<script>
    const editors = document.querySelectorAll('.ckeditor');
    editors.forEach((el) => {
        ClassicEditor
            .create(el)
            .catch( error => {
                console.error( error );
            } );
    });
</script>

赞(0）回复(0）举报 2023-03-21

我来回答

javascript CKEDITOR 5多个示例

2条答案

相关问题

热门标签

最新问答