在同一页面上使用多个不同的编辑器“ 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

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>