如何使用ckeditor制作所有文本区域

Question

我有 4 个 Textarea 元素我想应用到它们 CKEditor , 但只有第一个适用于它即使我放了 class 而不是 id

我不会js，所以我复制了我在文件中看到的内容

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 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>

Answer 1

您需要遍历文本区域的所有实例并在每个元素上初始化 CkEditor。

<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>

如何使用ckeditor制作所有文本区域

how to make all textarea with ckeditor

html

javascript

jquery

ckeditor