[SOLVED] adding fill in the blank option in Angular ngx-editor

adding fill in the blank option in Angular ngx-editor

I am using ngx-editor in Angular 11/12. I require to add a fill-in-the-blanks option at the cursor position.

essentially I wish to add HTML markup at the cursor position on the click of a button.

any help?

Solution

I made an external input and button to copy. Input gets the text and copy button means that if copying is enabled, on click to editor, text from input will be added to editor click location on next click.

  myInput: string;
  isCopy = false;

  @HostListener('click', ['$event.target']) onClick(e){
    console.log(e);
    if (this.isCopy) {
      e.innerText = e.innerText + this.myInput
    }
  }

    My input: <input [(ngModel)]="myInput"> 
    <button (click)="isCopy = !isCopy" [ngStyle]="{'background-color': isCopy ? 'red' : '' }">copy!</button>

Working example: https://stackblitz.com/edit/ngx-editor-qydmny?file=src%2Fapp%2Fapp.component.html