CODEWITHSUNDEEP
javascripthtmlckeditorckeditor5
David
David

Reputation: 59

Using multiple different editors on the same page “CKEDITOR5”

Using multiple different editors on the same page “CKEDITOR5” Classic e Balloon

I can't put two different types of editors on one page. Below I leave an example of what it would be like to place 2 different editors.

But as I have a library for each type of editor it appears to say “CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.”

And sorry for the bad English.

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

Upvotes: 0

Views: 3488

Answers (2)

eheydenr
eheydenr

Reputation: 1020

I faced the same question from a customer. More than one BalloonEditor on 1 page. One solution would be to initialize every instance by his own id, but I thought that it would be easier to add one class to the elements I wanted to become an ballooneditor. So that's what I did:

I introduced a class .editable on selected elements:

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

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

And then (in for instance the document ready function), I handled them as follows:

$(document).ready(function() {

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

  ....
  ..

});

To track changes to the different elements, I added a handler like this:

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

That gave me the opportunity to save the changes with an AJAX handler.

It is just a suggestion, but it works fine for me.

Upvotes: 1

Eric Coetzee
Eric Coetzee

Reputation: 37

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>

Upvotes: 1

Related Questions