RichTextEditor

Uso

Conecta la cadena HTML mediante value. Los comandos actúan sobre la selección del editor; variables inserta marcadores definidos por la aplicación. showPreview muestra una vista de solo lectura. maxPastedImageBytes limita imágenes pegadas e imageRejected informa del rechazo. Valida y sanea el contenido en el límite de tu aplicación antes de almacenarlo o renderizarlo fuera del editor.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

<neu-rich-text-editor
  [value]="value()"
  (valueChange)="value.set($event)"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
  [showPreview]="false"
  [size]="'sm'"
  [minHeight]="'180px'"
  [labels]="labels()"
  [variables]="['customer', 'reference']"
  [variablesLabel]="'Variables'"
  (valueCommitted)="record('valueCommitted', $event)"
  (imageRejected)="record('imageRejected', $event)"
  [label]="'Descripción'"
  [placeholder]="'Escribe aquí…'"
  [previewLabel]="'Vista previa'"
  [variablesAriaLabel]="'Variables disponibles'"
/>

import { signal } from '@angular/core';

export const value = signal("<p>Neural UI</p>");

export const labels = signal({
  "toolbar": "Editor de texto",
  "formatGroup": "Formato de texto",
  "listsGroup": "Listas",
  "insertGroup": "Insertar",
  "clearGroup": "Limpiar",
  "bold": "Negrita",
  "italic": "Cursiva",
  "underline": "Subrayado",
  "unorderedList": "Lista con viñetas",
  "orderedList": "Lista numerada",
  "addLink": "Añadir enlace",
  "addImageUrl": "Añadir imagen por URL",
  "clearFormat": "Quitar formato",
  "linkUrlPrompt": "URL del enlace",
  "linkTextPrompt": "Texto del enlace",
  "imageUrlPrompt": "URL de la imagen",
  "imageAltPrompt": "Texto alternativo",
  "imageAltFallback": "Imagen",
  "pastedImageAlt": "Imagen pegada"
});

Estado y eventos

Conecta la cadena HTML mediante value. Los comandos actúan sobre la selección del editor; variables inserta marcadores definidos por la aplicación. showPreview muestra una vista de solo lectura. maxPastedImageBytes limita imágenes pegadas e imageRejected informa del rechazo. Valida y sanea el contenido en el límite de tu aplicación antes de almacenarlo o renderizarlo fuera del editor.

Accesibilidad y teclado

Tab recorre la barra de herramientas y la zona editable. Dentro del editor funcionan los atajos nativos de edición y selección de texto.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuRichTextEditorCommand } from '@neural-ui/core/rich-text-editor';

// Declaración pública (solo referencia)
type NeuRichTextEditorCommand = 'bold' | 'italic' | 'underline' | 'insertUnorderedList' | 'insertOrderedList' | 'removeFormat';

import type { NeuRichTextEditorLabels } from '@neural-ui/core/rich-text-editor';

// Declaración pública (solo referencia)
interface NeuRichTextEditorLabels {
  addImageUrl: string;
  addLink: string;
  bold: string;
  clearFormat: string;
  clearGroup: string;
  formatGroup: string;
  imageAltFallback: string;
  imageAltPrompt: string;
  imageUrlPrompt: string;
  insertGroup: string;
  italic: string;
  linkTextPrompt: string;
  linkUrlPrompt: string;
  listsGroup: string;
  orderedList: string;
  pastedImageAlt: string;
  toolbar: string;
  underline: string;
  unorderedList: string;
}

import type { NeuRichTextEditorSize } from '@neural-ui/core/rich-text-editor';

// Declaración pública (solo referencia)
type NeuRichTextEditorSize = 'sm' | 'md' | 'lg';

import type { NeuRichTextImageRejectedEvent } from '@neural-ui/core/rich-text-editor';

// Declaración pública (solo referencia)
interface NeuRichTextImageRejectedEvent {
  file: File;
  maxBytes: number;
  reason: 'size';
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.

• Password
• Knob
• ColorPicker