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:
Why only first?
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.
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.
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);
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With