I have implemented the CKeditor but have trouble adding data at specific points of the editor. I went through the CKeditor doc all the code contained the CKEDITOR keyword, so how and where can I apply this. like in this http://zkfiddle.org/sample/22fu1pr/4-Insert-text-at-cursor-for-CKEditor#source-1 but angular implementation

I have tried the id,

  <div class="row mb-3">
                        <form role="form" 
  #myForm="ngForm" accept-charset="UTF-8" novalidate>
   class="form-group has-feedback"

   [ngClass]="{ 'has-error': myckeditor.invalid && myckeditor.touched }">

  <ckeditor [(ngModel)]="mycontent"


   id = "myckeditor"





  *ngIf="myckeditor.invalid && myckeditor.touched" class="help- 
  block">Required field.</div>
                    <div class="row mb-3">
                        <button class="btn btn-secondary mr-2 ml-2" (click)="addValue()">CustomerNo</button>
   export class AppComponent {
   name = 'ng2-ckeditor';
   ckeConfig: any;
   mycontent: string;
   log: string = '';
   @ViewChild("myckeditor") ckeditor: any;

    constructor() {
     this.mycontent = `<p>My html content</p>`;

   ngOnInit() {
    this.ckeConfig = {
    allowedContent: false,
    extraPlugins: 'divarea',
    forcePasteAsPlainText: true

 public addValue(): void {
    this.CKEDITOR.instances['myckeditor'].setData('<p>This is the 
 editor data.</p>');


I want to be able to append values to the CKeditor dynamically with a button click or with a hyperlink.

1 Answers

CoderBackEndDev On Best Solutions

#myckeditor="ngModel" limits the functionality of the ckeditor so instead use #myckeditor and on the ts use @ViewChild('ckeditor') public ckeditor: any; to get access to the editor and simply do this this.ckeditor.instance.insertText(temp); to insert text to the cursor pointer position.