I have 4 Textarea elements I want to apply to them CKEditor , but just the first one applies to it even though I put a class instead of an id
I am not good with js so I copy what I saw in the files
HTML:
<div class="service-fields mb-3">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="h6">something<span class="text-danger">*</span></label>
<textarea class="editor form-control service-desc" name="editor2" id="editor2" cols="45" rows="5"></textarea>
</div>
</div>
</div>
</div>
<div class="service-fields mb-3">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="h6">something <span class="text-danger">*</span></label>
<textarea class="editor form-control service-desc" name="editor3" id="editor3" cols="45" rows="5"></textarea>
</div>
</div>
</div>
</div>
Script:
<script src="assets/js/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '.editor' ), {
// toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
</script>
You need to iterate over all instances of text areas and initialize CkEditor on each element.
<script>
let elements = document.querySelectorAll('.editor')
for (let element of elements) {
ClassicEditor.create(element, {})
.then( editor => {
element.ckEditor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
}
</script>