Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 232
Pavel Prokofiev Avatar asked Jan 07 '18 18:01

Pavel Prokofiev


People also ask

How do you increase CKEditor height?

The CKEDITOR. config. height option sets the height of the editing area with CKEditor 4 content — it does not include the toolbar or the bottom bar. This configuration option accepts an integer (to denote a value in pixels) or any CSS-defined length unit except percent ( % ) values which are not supported.

Does CKEditor use jQuery?

CKEditor 4 offers native jQuery integration through its jQuery Adapter (a jQuery plugin basically). It provides deep integration of CKEditor 4 and jQuery that lets you use the native features of jQuery when using CKEditor 4.


1 Answers

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);
        });
});
like image 160
Rifki Ardiansyah Avatar answered Sep 24 '22 12:09

Rifki Ardiansyah