HOWTO · Angular

Editor de texto enriquecido en Angular

Este tutorial demuestra cómo hacer un editor de texto enriquecido en Angular.

Por Rana Hasnain KhanPublicado 2022-05-23Actualizado 2022-05-23
En esta página

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.

Sobre el 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.

Ver el perfil del autor
LinkedIn