How to write data to texarea from CKEditor 5 Balloon Block?

Question

JavaScript

Hello. Faced such problem when using CKEditor 5 Balloon Block. It is not attached to the textarea, but is formed from the div: block and is generated using the code:

<div id="editor"></div>

<script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/balloon-block/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/balloon-block/translations/ru.js"></script>
<script>
  const textarea = document.querySelector( '#editor' );
  BalloonEditor.create( textarea , {
        language: 'ru',
        removePlugins: [ 'Table' ],
        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
    })
    .then( editor => {
      window.editor = editor;
    } )
    .catch( error => {
      console.error( 'There was a problem initializing the editor.', error );
    } );

  document.getElementById( 'submit' ).onclick = () => {
      textarea.value = editor.getData();
  }
</script>

The textarea looks like this:

<div class="form-group">
    <textarea id="tickets-editor" class="form-control" style="display: none" placeholder="ticket_content" name="content" rows="1"></textarea>
    <span class="error"></span>
  </div>

I need the data from the editor to be stored in a textarea. How to do it?

Answer 1

Understood the problem. The code was shoved into the wrong section. Here is a working version:

<script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/balloon-block/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/21.0.0/balloon-block/translations/ru.js"></script>
<script>
  const textarea = document.querySelector( '#editor' );
  BalloonEditor.create( textarea , {
        language: 'ru',
        removePlugins: [ 'Table' ],
        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
    })
    .then( editor => {
      window.editor = editor;
      
      editor.model.document.on( 'change:data', ( evt, data ) => {
            console.log( data );
            $('textarea#tickets-editor').html( editor.getData() );
        } );
    } )
    .catch( error => {
      console.error( 'There was a problem initializing the editor.', error );
    } );
</script>

.then( editor => {...}That is, it was necessary to add the code to the section :

.then( editor => {
      window.editor = editor;
      
      editor.model.document.on( 'change:data', ( evt, data ) => {
            console.log( data );
            $('textarea#tickets-editor').html( editor.getData() );
        } );
    } )