Editor de texto enriquecido en Angular

Rana Hasnain Khan 23 mayo 2022

Angular Angular Text Editor

Presentaremos cómo hacer un editor de texto enriquecido en Angular y qué bibliotecas podemos crear.

Use la biblioteca `Angular-Editor` para crear un editor de texto enriquecido en Angular

Al crear un sistema de administración de contenido o cualquier software web que necesite la funcionalidad para permitir que los usuarios editen contenido, tenemos dos opciones: usar texto sin formato o hacer un editor de texto enriquecido. Se utiliza un editor de texto enriquecido para dar formato al texto utilizando muchas opciones.

Podemos agregar imágenes, enlaces, audio y videos que se convertirán en contenido HTML.

Hay muchas bibliotecas en Angular que nos pueden ayudar a integrar un editor de texto enriquecido en nuestra aplicación web, como Angular-Editor, Angular Trix, Angular Meditor, ngQuill y Angular inline text editor.

La biblioteca que usaremos para hacer un editor de texto enriquecido es @kolkov/angular-editor. Podemos instalar @kolkov/angular-editor usando el administrador de paquetes npm.

# CLI
npm install @kolkov/angular-editor --save

Después de instalarlo, debemos importar HttpClientModule desde @angular/common/http y AngularEditorModule desde @kolkov/angular-editor en app.module.ts.

Nuestro app.module.ts se verá como a continuación.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { AngularEditorModule } from '@kolkov/angular-editor';


@NgModule({
  imports:      [ BrowserModule, FormsModule, AngularEditorModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Ahora podemos configurar nuestro editor de texto enriquecido usando AngularEditorConfig. Podemos realizar las siguientes configuraciones.

Configuración	Tipo	Defecto	Descripción
`editable`	`Boolean`	`true`	Habilitar o deshabilitar el editor
`spellcheck`	`Boolean`	`true`	Habilitar o deshabilitar la revisión ortográfica
`translate`	`string`	`yes`	Habilitar o deshabilitar la traducción
`sanitize`	`Boolean`	`true`	Habilitar o deshabilitar la desinfección de DOM
`height`	`string`	`auto`	Podemos establecer la altura del editor usándolo.
`minHeight`	`string`	`0`	Podemos establecer la altura mínima del editor usándolo.
`maxHeight`	`string`	`auto`	Podemos establecer la altura máxima del editor usándolo.
`width`	`string`	`auto`	Podemos establecer el ancho del editor usándolo.
`minWidth`	`string`	`0`	Podemos establecer el ancho mínimo del editor usándolo.
`enableToolbar`	`Boolean`	`true`	Habilitar o deshabilitar la barra de herramientas
`showToolbar`	`Boolean`	`true`	Mostrar u ocultar la barra de herramientas
`toolbarPosition`	`string`	`top`	Podemos establecer la posición de la barra de herramientas como superior o inferior
`placeholder`	`string`	-	Podemos establecer un marcador de posición para el editor.
`defaultParagraphSeparator`	`string`	-	Podemos definir un separador de párrafo predeterminado como la etiqueta `p`
`defaultFontName`	`string`	-	Podemos configurar la fuente predeterminada como `Arial`
`defaultFontSize`	`string`	-	Podemos establecer el tamaño de fuente predeterminado
`uploadUrl`	`string`	-	Podemos configurar el punto final de carga de la imagen y devolver una respuesta con la clave imageUrl. `{"imageUrl" : }`
`upload`	`function`	-	Podemos usar la función de carga de imágenes.
`uploadWithCredentials`	`Boolean`	`false`	Podemos hacer que la carga de imágenes esté protegida con contraseña o no.
`fonts`	`Font[]`	-	Podemos establecer una serie de fuentes que se pueden usar, como `[{nombre, clase}]`, etc.
`customClasses`	`CustomClass[]`	-	Podemos establecer un array de clases disponibles que se pueden usar en el editor.
`outline`	`Boolean`	`true`	Podemos establecer el contorno del editor en foco.
`toolbarHiddenButtons`	`string[][]`	-	Podemos establecer un array de nombres de botones o elementos que se ocultarán.

Usando las configuraciones anteriores, configuraremos nuestro editor de texto enriquecido.

# angular
import { Component } from '@angular/core';
import { AngularEditorConfig } from '@kolkov/angular-editor';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular 6';
  htmlContent = '';

  config: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '10rem',
    minHeight: '5rem',
    placeholder: 'Enter text in this rich text editor....',
    defaultParagraphSeparator: 'p',
    defaultFontName: 'Arial',
    customClasses: [
      {
        name: 'Quote',
        class: 'quoteClass',
      },
      {
        name: 'Title Heading',
        class: 'titleHead',
        tag: 'h1',
      },
    ],
  };
}

Crearemos una plantilla usando la etiqueta editor angular para mostrar nuestro editor de texto enriquecido y la salida de nuestro editor de texto enriquecido; usaremos la variable htmlContent, que definimos en app.component.ts.

Nuestro código en app.component.html se verá a continuación.

# angular
<h1>AngularEditor</h1>
<angular-editor [(ngModel)]="htmlContent" [config]="config"></angular-editor>
<h1>HTML Output</h1>
<div class="html">
  {{ htmlContent }}
</div>

Producción:

editor de texto enriquecido en angular

De esta manera fácil, podemos crear un editor de texto enriquecido.

Autor: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Use la biblioteca Angular-Editor para crear un editor de texto enriquecido en Angular

Use la biblioteca `Angular-Editor` para crear un editor de texto enriquecido en Angular