Integrate CKEditor API to programmatically make calls in component

Question

I have created a custom toolbar service to manually apply styles to a targeted iframe.

HTML

<button (click)="exec('bold')">B</button>
<div contenteditable (input)="onInput($event.target.innerHTML)" class="editor" #editor></div>

Typescript

import {
  Component,
  Input,
  OnInit,
  Output,
  EventEmitter,
  OnChanges,
  ViewChild,
  ElementRef
} from '@angular/core';


@Component({
  selector: 'editor',
  templateUrl: './editor.html',
  styleUrls: ['./editor.scss']
})
export class Editor implements OnInit, OnChanges {
  @Input() value: any;
  @ViewChild('editor') editor: ElementRef;
  @Output() valueChange = new EventEmitter();


  ngOnInit() {
    document.execCommand("styleWithCSS", false, null);
    this.editor.nativeElement.innerHTML = this.value;
  }
  ngOnChanges(changes: any) {
    try {
      if (this.editor.nativeElement.innerHTML != this.value) {
        this.editor.nativeElement.innerHTML = this.value;
      }
    } catch (err) {

    }
  }

  exec(a, b = null) {
    document.execCommand(a, false, b);
  };

  onInput(newValue) {
    this.valueChange.emit(newValue);
  }
}

It works as expected, but I would like to leverage an external API (CKEditor) in order to make any calls to make the update. So instead of execCommand, I am purely using CKEditor to target my component. From my understanding, most of these text editors require you to use their internal toolbar, but I don't want to use that.

I've mocked up an example of what I am trying to do here: https://stackblitz.com/edit/angular-rich-editor-test-b3yvjv.

Answer 1

CKEditor is high configurable, you may create your personal feature or change how it work.

Check this link to understand how to manage your custom build: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html

Check this to understand how to create a personal feature: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-a-block-widget.html

Moreover you can try to work with CKEditor's events: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html