Как добавить элемент и текст после текущего выделения в CKEDITOR - PullRequest
Новая
       11

Как добавить элемент и текст после текущего выделения в CKEDITOR

0 голосов
/ 02 ноября 2019

Я создаю плагин для вставки текста в CKEDITOR 5 для функции injectEditor (), и он работает, но он всегда добавляется в конец статьи. Я ожидаю, что текст будет вставлен в последний оставленный курсор выбора, прежде чем я нажму на триггер. Что мне делать? 

function injectEditor( ) {
	// window.editor must be an instance of the editor.
	editor.model.change( writer => {
		const insertPosition = editor.model.document.selection.getFirstPosition();

		const root = editor.model.document.getRoot();
		const open = writer.createElement( 'paragraph' );
		const close = writer.createElement( 'paragraph' );
		const body = writer.createElement( 'paragraph' );

		writer.insertText( '--div--', open );
		writer.insertText( '--/div--', close );    		
		writer.append( open, root );
		writer.append( body, root );
		writer.append( close, root );

		writer.setSelection( body, 'in' );    		
	} );
	editor.editing.view.focus();	
}
                
// trigger plugin
 $(function(){
	$('.btn-plugin').on('click', function(){
		var bg_color = $(this).attr('bg-color');
		var div_type = $(this).attr('div-type');
		var inject_string = '--div-'+div_type+'['+bg_color+']--';
		injectEditor(inject_string);
	})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/12.3.0/decoupled-document/ckeditor.js"></script>
<div class="document-editor">
  <div class="document-editor__toolbar"></div>
  <div>
      <button class="btn-plugin btn btn-primary" div-type="example-container" bg-color="blue">Trigger</button>
  </div>
  <div class="document-editor__editable-container">
      <div class="document-editor__editable paper">
        the injected text must on the selection cursor, not always in the end
      </div>
  </div>
</div>
<script type="text/javascript">
	DecoupledEditor
	.create( document.querySelector( '.document-editor__editable' )
	 )
	.then( editor => {
	    const toolbarContainer = document.querySelector( '.document-editor__toolbar' );

	    toolbarContainer.appendChild( editor.ui.view.toolbar.element );

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