how to make all textarea with ckeditor-CodePudding

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>

CodePudding user response：

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>