CODE WITH EDD | USANDO NGX-QUILL PARA ANGULAR

USANDO EL MODULO DE ANGULAR NGX-QUILL DE QUILL RICH TEXT EDITOR.

Instalar ngx-quill:

npm install ngx-quill

Una vez instalado revisar si se tiene instalado: @angular/core, @angular/common, @angular/forms, @angular/platform-browser, quill, rxjs, y en caso de no tenerlos instalados se deberá de instalar.

Ya que se tiene instalado todo, en nuestro archivo app.module.ts debemos importar el modulo de quill agregando la siguiente línea de código:

import { QuillModule } from 'ngx-quill';

En nuestro @NgModule en la sección de imports, agregamos la siguiente línea de código:

QuillModule.forRoot()

En nuestro archivo angular.json, en la sección de styles agregaremos los css de quill con las siguientes líneas de código:

"./node_modules/quill/dist/quill.bubble.css",
"./node_modules/quill/dist/quill.snow.css",
"./node_modules/quill/dist/quill.core.css"

Y en la sección de scripts agregamos la siguiente línea de código:

"./node_modules/quill/dist/quill.js"

En nuestro componente en el archivo html, agregaremos nuestro quill-editaor agregando la siguiente línea de código:

<quill-editor id="txtContent" [modules]="modulesQuill" (onEditorChanged)="onChangedEditor($event)"></quill-editor>

En nuestro componente en el archivo ts, agregaremos una variable publica para establecer la configuración del quill-editor:

public modulesQuill = {
	toolbar: [
	  ['bold', 'italic', 'underline', 'strike'],
	  [{ font: [] }],
	  [{ color: [] }, { background: [] }],
	  [{ size: ['small', false, 'large', 'huge'] }],
	  [{ header: [1, 2, 3, 4, 5, 6, false] }],
	  [{ align: [] }],
	  ['blockquote', 'code-block'],
	  [{ list: 'ordered'}, { list: 'bullet' }],
	  ['link', 'image', 'video'],
	  ['clean'],
	]
};

También agregaremos una variable publica donde se almacenara el contenido que se escriba en el quill-editor.

public htmlContent: any;

También se agregara una función para el evento onChangedEditor que se activara cada que se modifique el quill-editor.

onChangedEditor(event: any): void {
	if (event.html) {
      this.htmlContent = event.html;
    }
}

Con esto podemos crear nuestros artículos/entradas para después almacenarlas utilizando la variable publica this.htmlContent que es la que contendrá el código html de lo que se escriba en el editor quill.

Referencia: https://www.npmjs.com/package/ngx-quill

USANDO NGX-QUILL PARA ANGULAR