element.nextElementSibling 没有返回正确的元素

Question

我正在使用 CKEditor 5 在每个具有 class .section-dynamique-fr 的 textarea 上创建一个文本丰富的编辑器。

编辑器确实附加到我的 html 页面。

现在，当我尝试使用 e.nextElementSibling 通过 javascript 访问编辑器时，它不会 return 它的 nextElementSibling 正如在控制台的节点树中看到的那样检查员，而不是 returns e.nextElementSibling.nextElementSibling.

知道为什么我无法访问 e.nextElementSibling 吗？（div 与 class .ck-editor） ?

html 节点结构见附图

document.querySelectorAll('.section-dynamique-fr').forEach( (e) => {

    ClassicEditor
        .create( document.querySelector('#' + e.id), {
            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        } )
        .then( editor => {
            window.editor = editor;
            thisEditor = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );

    console.log(e); //This gives me the textarea
    console.log(e.nextElementSibling); //This should gives me the div with class ck-editor but instead gives me the div with class .textarea-saved-content-fr

Answer 1

这是因为编辑器在create执行后没有创建。您需要将代码替换为 then 回调。 callback 是一个 Promise ，它将在编辑器完全创建后解决。参见 documentaion

document.querySelectorAll('.section-dynamique-fr').forEach( (e) => {

    ClassicEditor
        .create( document.querySelector('#' + e.id), {
            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        } )
        .then( editor => {
            window.editor = editor;
            thisEditor = editor;
            console.log(e.nextElementSibling);
        } )
        .catch( err => {
            console.error( err.stack );
        } );

element.nextElementSibling 没有返回正确的元素

element.nextElementSibling is not returning the right element

javascript

ckeditor

ckeditor5