Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67411

How to inject element and text after current selection in CKEDITOR

$
0
0

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>

Viewing all articles
Browse latest Browse all 67411

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>