在同一页面上使用多个不同的编辑器“CKEDITOR5”

Question

在同一页面上使用多个不同的编辑器“ CKEDITOR5 ”经典e气球

我不能在一页上放置两种不同类型的编辑器。 下面我留下了一个例子，说明放置 2 个不同的编辑器会是什么样子。

但是由于我为每种类型的编辑器都有一个库，它似乎说“ CKEditorError：ckeditor-duplicated-modules：某些 CKEditor 5 模块被复制。 ”

抱歉英语不好。

<div class="editorclassic">
</div>
<div class="editorballoon">
</div>

// The two libraries repeated but each adapted to a type of editor
<script src="plugins/ckeditor5classic/build/ckeditor.js"></script>
<script src="plugins/ckeditor5ballon/build/ckeditor.js"></script>

// Initialize both types of editors
<script>
            ClassicEditor
            .create( document.querySelector( '.editornormal' ), {
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'bulletedList',
                        'numberedList',
                        '|',
                        '|',
                        'imageUpload',
                        'blockQuote',
                        'insertTable',
                        'mediaEmbed',
                        'undo',
                        'redo'
                    ]
                },
                language: 'pt',
                licenseKey: '',

            } )
            .then( editor => {
                window.editor = editor;
            } )
            .catch( error => {
                console.error( error );
            } );



            BalloonEditor
            .create( document.querySelector( '.editorballon' ), {
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'link',
                        'bulletedList',
                        'numberedList',
                        '|',
                        'indent',
                        'outdent',
                        '|',
                        'imageUpload',
                        'blockQuote',
                        'insertTable',
                        'mediaEmbed',
                        'undo',
                        'redo'
                    ]
                },
                language: 'pt',
                image: {
                    toolbar: [
                        'imageTextAlternative',
                        'imageStyle:full',
                        'imageStyle:side'
                    ]
                },
                table: {
                    contentToolbar: [
                        'tableColumn',
                        'tableRow',
                        'mergeTableCells'
                    ]
                },
                licenseKey: '',

            } )
            .then( editor => {
                window.editor = editor;
            } )
            .catch( error => {
                console.error( error );
            } );
    </script>

Answer 1

我遇到了一个客户提出的同样问题。 1 页上不止一个 BalloonEditor。 一种解决方案是通过他自己的 id 初始化每个实例，但我认为将一个类添加到我想成为气球编辑器的元素中会更容易。 所以这就是我所做的：

我在选定元素上引入了一个.editable类：

<div id="elm1" class='editable'>
  Some text...
</div>

<div id="elm2" class='editable'>
  Some other text...
</div>

然后（例如在文档就绪函数中），我按如下方式处理它们：

$(document).ready(function() {

  var id;
  $('.editable').each(function() {
      id = $(this).attr('id');
      if (id != '') {
          BalloonEditor
              .create(document.querySelector( '#' + id ))
              .catch( error => {
                  console.error( 'error' );
              } )
      }
  })

  ....
  ..

});

为了跟踪不同元素的变化，我添加了一个这样的处理程序：

$('.editable').on('blur', function(ev) {
    console.log('en blurred');
    var id = $(this).attr('id');
    console.log($(this).html())
    console.log(id);
})

这让我有机会使用 AJAX 处理程序保存更改。

这只是一个建议，但对我来说效果很好。

Answer 2

 document.addEventListener("DOMContentLoaded", function(event) { var numb = 1; do { ClassicEditor .create( document.querySelector( '#body'+ numb ), { removePlugins: [ 'insertImage', 'insertMedia', 'Link', 'blockQuote' ], toolbar: [ 'Heading', 'bold', 'italic', 'bulletedList', 'numberedList', ] } ) .catch( error => { console.error( error ); } ) numb++; } while (numb < 4); });

 .ck-editor__editable_inline { min-height: 150px; }

 <p><textarea placeholder="Description" id="body1" name="body"></textarea></p> <p><textarea placeholder="Description" id="body2" name="body"></textarea></p> <p><textarea placeholder="Description" id="body3" name="body"></textarea></p> <script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>