How can i create multiple editors whit class name

Question

I try to create multiple ckeditors classic. The problem is that i dont know how many i will have. So i init them by className. This init the editors and work, but dont send anything trough ajax. So when i try to update the textarea only i can send the last editor because window.editor is overwrite. I try then to store in an array but i cant pass th for neditor value because its a then so it executes when the for loop is done, so neditor is always 2. How can i made it work? Idont understand very well promises Thanks!

import ClassicEditor from './ckeditor5-build-classic';

var allEditors = document.querySelectorAll('.usarCkeditor');//i have 2 editors in that case
for (var neditores = 0; neditores < allEditors.length; neditores++) {
    ClassicEditor.create(allEditors[neditores])
        .then(editor => {
            window.editor = editor;//window.editor is alway the last editor
        })
        .catch(err => {
            console.error(err.stack);
        });
}

This is other version :

for (var neditores = 0; neditores < allEditors.length; neditores++) {
    window["editor" + neditores] = 'paco';
    ClassicEditor.create(document.querySelector('#' + allEditors[neditores].attributes.id.value))
        .then(editor => {
            console.log(editor);
            window["editor" + neditores] = editor;
            console.log(neditores);//always 2 so it overwrites the array

        })
        .catch(err => {
            console.error(err.stack);
        });
}

//window.editor -> [0] = 'paco';[1] = 'paco';[2]= ckeditor

Mateusz · Accepted Answer · 2019-07-05T14:53:34.153

3

Please notice that querySelectorAll returns an HTMLNodeList not an Array.

If you want to initialize editor over multiple elements with classes you can do it for example in this way. All references to editors instances will be stored in window.editors object.

window.editors = {};

document.querySelectorAll( '.editor' ).forEach( ( node, index ) => {
    ClassicEditor
        .create( node, {} )
        .then( newEditor => {
            window.editors[ index ] = newEditor 
        } );
} );

This is a working sample: https://codepen.io/msamsel/pen/pXONjB?editors=1010

edited Jul 05 '19 at 14:53

answered Jul 05 '19 at 14:42

Mateusz

683
4
17

Thanks @mateusz-samsel !!! it works perfectly. But i get confused.My array version initlializes well, but its imposible to store a reference in window.editor. How this vrrsion have a correct index value?? `window.editors[neditores] ` was alway the number of editors +1, 2 in that case – rodriciru Jul 08 '19 at 07:51
Hi @rodriciru, It's an [**arrow function**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) you can consider syntax like: `( node, index ) => { /* do sth with node and index */ }` as `function( node, index) { /* do sth with node and index */ }` – Mateusz Jul 08 '19 at 07:51
Ok. I got it! So i supose that `then` executes in the future, so it will always be 2 no? – rodriciru Jul 08 '19 at 07:55
About your index, it's because of how the code is executed. Part in `then` section is executed in a similar way as in `setTimeout`. So when it starting to be run `neditors` already has maximum value (loop already finished). Take a look on this explanation it's fit here as well: https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – Mateusz Jul 08 '19 at 07:56
Ok. I suppose this was the problem but no idea how to fix that. Thank you so much @mateusz-samsel !! – rodriciru Jul 08 '19 at 08:06

How can i create multiple editors whit class name

1 Answers1