Editor dde texto en angulas (HTML)

 Hola , los tiempo cambian  y pues bueno en un proyecto nesesite un editor de texto, en mis recuerdo  pensaba que existian varios, estos como librerias .js, claro en tiempo del auje de PHP

Pero hoy en día la cosa cambio a mal cada libreria requiere integración y unas hasta pagos si bien las gratuitas se agradecen no logre acomodarla para lo que queria intente de 1000 formas y nada pero bueno....

Al final opte por una propiea asi tambien comparto esta para quien nesesite un editor sencillo de texto pero que retorne HTML por debajo sin tantan cosa 

En un componente se  crea el siguiente código:

textHtml: string = "";

// Editor-----------

@ViewChild('editor') editor!: ElementRef;

format(command: string) {

document.execCommand(command, false);

this.editor.nativeElement.focus();

}

initEditor() {

this.editor.nativeElement.innerHTML = this.textHtml;

}

changeFontFamily(event: Event) {

const font = (event.target as HTMLSelectElement).value;

document.execCommand('fontName', false, font);

this.editor.nativeElement.focus();

}

changeFontSize(event: Event) {

const size = (event.target as HTMLSelectElement).value;

document.execCommand('fontSize', false, size);

this.editor.nativeElement.focus();

}

changeTextColor(event: Event) {

const color = (event.target as HTMLInputElement).value;

document.execCommand('foreColor', false, color);

this.editor.nativeElement.focus();

}

insertTable() {

const table = document.createElement('table');

table.style.width = '100%';

table.style.borderCollapse = 'collapse';

for (let i = 0; i < 3; i++) {

const row = table.insertRow();

for (let j = 0; j < 3; j++) {

const cell = row.insertCell();

cell.innerHTML = '';

cell.style.border = '1px solid #000';

cell.style.padding = '8px';

}

}

const selection = window.getSelection();

const range = selection!.getRangeAt(0);

range.insertNode(table);

this.editor.nativeElement.focus();

}

onInput(event: Event) {

const content = this.editor.nativeElement.innerHTML;

this.textHtml = content;

}

En el html del componenete:

<div class="editor-toolbar">

<button (click)="format('bold')">Negrita</button>

<button (click)="format('underline')">Subrayado</button>

<button (click)="format('justifyLeft')">Alinear Izquierda</button>

<button (click)="format('justifyCenter')">Centrar</button>

<button (click)="format('justifyRight')">Alinear Derecha</button>

<button (click)="format('justifyFull')">Justificar</button>

<select (change)="changeFontFamily($event)">

<option value="">Seleccionar Fuente</option>

<option value="Arial">Arial</option>

<option value="Courier New">Courier New</option>

<option value="Georgia">Georgia</option>

<option value="Times New Roman">Times New Roman</option>

<option value="Verdana">Verdana</option>

</select>

<select (change)="changeFontSize($event)">

<option value="">Seleccionar Tamaño</option>

<option value="2">2</option>

<option value="4">4</option>

<option value="6">6</option>

<option value="8">8</option>

<option value="10">10</option>

</select>

<input type="color" (input)="changeTextColor($event)" title="Cambiar color de texto" />

<br>

<button (click)="insertTable()">Insertar Tabla</button>

Fila<input type="number" value="1" min="1" max="5">

Columnas<input type="number" value="1" min="1" max="5">

</div>

<div class="editor" contenteditable="true" (input)="onInput($event)" #editor></div>

NOTA: en caso de cargar data en el editor recordar que este este ya instanciado para ello en el componente use: this.textHtml = this.data.contenido;

setTimeout(() => {

this.initEditor();

}, 400);