CODEWITHSUNDEEP
javascriptckeditorckeditor5
Pavel Prokofiev
Pavel Prokofiev

Reputation: 449

Multiple textareas with CKEditor 5

I try to set CKEditor 5 to more than one <textarea>, but only the first one works.

Here is the code:

<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
<textarea name="content0" class="editor" id="c0">This is some sample content.</textarea>
<textarea name="content1" class="editor" id="c1">This is some sample content.</textarea>
<textarea name="content2" class="editor" id="c2">This is some sample content.</textarea>
<script>ClassicEditor.create(document.querySelector('.editor'));</script>

And here is the result: enter image description here

Why only first?

Upvotes: 13

Views: 12447

Answers (3)

Nawaz Sayyad
Nawaz Sayyad

Reputation: 1

This solution work for me

<script>
    CKEDITOR.on('instanceReady', function(event) {
        var editor = event.editor;
        editor.on('change', function(event) {
            // Sync textarea
            this.updateElement();
            for (var i in CKEDITOR.instances) {
            CKEDITOR.instances['ckeditor' + i].on('change', function() 
            { CKEDITOR.instances['ckeditor' + i].updateElement() });
            }
        });
    });
</script>

Upvotes: 0

Rifki Ardiansyah
Rifki Ardiansyah

Reputation: 65

I prefer to use foreach instead of for loop like the @Wizard's answer

document.querySelectorAll('[data-init-plugin="ckeditor"]').forEach(function (val) {
    ClassicEditor
        .create(val, {
            toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
        })
        .catch(error => {
            console.log(error);
        });
});

Upvotes: 3

Wizard
Wizard

Reputation: 3151

document.querySelector() returns the first matched element. You need document.querySelectorAll()

<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
<textarea name="content0" class="editor" id="c0">This is some sample content.</textarea>
<textarea name="content1" class="editor" id="c1">This is some sample content.</textarea>
<textarea name="content2" class="editor" id="c2">This is some sample content.</textarea>
<script>
var allEditors = document.querySelectorAll('.editor');
for (var i = 0; i < allEditors.length; ++i) {
  ClassicEditor.create(allEditors[i]);
}
</script>

Upvotes: 30

Related Questions