I create CKEDITOR 5 inject text plugin on injectEditor() function and it works, but it always injected to the end of the paper. I expect the text injected to the last selection cursor left before I click the trigger. What should I do?
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>