Ckeditor5-angular: Insert text at the Cursor Position Angular

Created on 7 Apr 2020  路  2Comments  路  Source: ckeditor/ckeditor5-angular

I have implemented CK editor5 in my angular application. I want to insert a text at the cursor position, on clicking the text outside the editor. Please help me to achieve this in angular.

question

All 2 comments

Hi, thanks for the report. If you want to insert some text at the selection, you can use code like this:

const selection = editor.model.document.selection;
const range = selection.getFirstRange();

editor.model.change ( writer => {
    writer.insert( 'Some text', range.start );
} );

I'm not sure what you mean by _"clicking the text outside the editor"_. So if the above snippet is not enough, could you provide more information about what is your goal here?

Thank you. This Working as expected. Used the below code:
Html:

<form [formGroup]="formGroup">       
        <ckeditor #editor [config]='config' [editor]="Editor" [formControlName]="formControlName"
            (ready)="setInstance($event)"></ckeditor>
<ul>
<li (click)="elementClick('Insert Text) ">Insert Text</li>
</ul>
    </form>

TS:

import { CKEditorComponent } from '@ckeditor/ckeditor5-angular';

@ViewChild('editor', { static: false }) editor: CKEditorComponent;

 elementClick(arg) {
    const appendData = arg.;
    const selection = this.editor.editorInstance.model.document.selection;
    const range = selection.getFirstRange();
    this.editor.editorInstance.model.change(writer => {
      writer.insert(appendData, range.start);
    });
  }
Was this page helpful?
0 / 5 - 0 ratings