代码之家  ›  专栏  ›  技术社区  ›  Pavel Prokofiev

使用CKEditor 5的多个文本区域

  •  12
  • Pavel Prokofiev  · 技术社区  · 7 年前

    我尝试将CKEditor 5设置为多个 <textarea> ,但只有第一个有效。

    代码如下:

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

    结果如下: enter image description here

    为什么只有第一个?

    3 回复  |  直到 7 年前
        1
  •  28
  •   Wizard    7 年前

    document.querySelector() 返回第一个匹配的元素。你需要 document.querySelectorAll()

    <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>
    var allEditors = document.querySelectorAll('.editor');
    for (var i = 0; i < allEditors.length; ++i) {
      ClassicEditor.create(allEditors[i]);
    }
    </script>
    
        2
  •  2
  •   Rifki Ardiansyah    3 年前

    我更喜欢使用foreach,而不是像@Wizard的答案那样使用for循环

    document.querySelectorAll('[data-init-plugin="ckeditor"]').forEach(function (val) {
        ClassicEditor
            .create(val, {
                toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
            })
            .catch(error => {
                console.log(error);
            });
    });
        3
  •  0
  •   Nawaz Sayyad    3 年前

    这个解决方案对我有用

    <script>
        CKEDITOR.on('instanceReady', function(event) {
            var editor = event.editor;
            editor.on('change', function(event) {
                // Sync textarea
                this.updateElement();
                for (var i in CKEDITOR.instances) {
                CKEDITOR.instances['ckeditor' + i].on('change', function() 
                { CKEDITOR.instances['ckeditor' + i].updateElement() });
                }
            });
        });
    </script>