Как записывать данные в texarea из CKEditor 5 Balloon Block?

Question

[Andrej Kopp]

Всем привет. Столкнулся с такой проблемой при использовании CKEditor 5 Balloon Block. Он не привязывается к textarea, а формируется из блока div:

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

Textarea выглядит вот так:

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

Мне нужно чтобы данные из редактора сохранялись в textarea. Как это сделать?

Answer 1

[Andrej Kopp]

Разобрался в проблеме. Не в ту секцию код пихал. Вот рабочий вариант:

<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 => {...} код добавить:

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