Documentación

Instala el editor, configúralo y contrólalo desde tu código. 108 guías y páginas de referencia.

Empieza aquí

Inicio rápido

Pon en marcha RichTextEditor 2.6.12: elige una forma de configuración, crea tu primer editor, lee y guarda HTML y soluciona los problemas de configuración habituales.

Referencia de configuración

Todas las opciones de configuración de RichTextEditor: ajustes principales del editor, tipografía inteligente, seguridad de los iframes y más de 100 opciones de plugins para IA, exportación, paginación, accesibilidad y seguridad del contenido.

Todos los métodos

Referencia completa de los métodos de la API de JavaScript de las instancias de RichTextEditor: contenido, selección, comandos, cuadros de diálogo y ciclo de vida.

AI Toolkit

Referencia del AI Toolkit: el cuadro de diálogo Ask AI, AI Chat, AI Review, el hook aiToolkitResolver, el contrato de operaciones, las acciones personalizadas y BYOK.

Primeros pasos

Cómo instalar, preparar y configurar el editor.

Inicio rápido

Pon en marcha RichTextEditor 2.6.12: elige una forma de configuración, crea tu primer editor, lee y guarda HTML y soluciona los problemas de configuración habituales.

Instalación (div)

Instala RichTextEditor en un elemento div: incluye rte.js, crea la instancia y lee o establece el contenido HTML desde tus propios scripts.

Instalación (textarea)

Instala RichTextEditor en un textarea: el editor sincroniza automáticamente el HTML con el campo del formulario, así que los envíos de formularios existentes siguen funcionando.

Inicialización

RichTextEditor JavaScript global enables you to create, modify and interact with instances of the editor. This is the starting point for any integration.

Configuración

RichTextEditor se puede configurar de varias formas para adaptarlo a la experiencia de edición que buscas.

Referencia de configuración

Todas las opciones de configuración de RichTextEditor: ajustes principales del editor, tipografía inteligente, seguridad de los iframes y más de 100 opciones de plugins para IA, exportación, paginación, accesibilidad y seguridad del contenido.

Skin (aspecto)

Configuración del skin y el tema: cambia los skins de la barra de herramientas, sobrescribe variables CSS y adapta el estilo de la interfaz del editor a tu producto.

Establecer y obtener el contenido

Las formas habituales de establecer y leer el contenido HTML de RichTextEditor desde JavaScript, incluida su lectura antes de enviar un formulario.

Estado de React y problemas con el cursor

Elige entre estado controlado o no controlado para RichTextEditor en React. Guarda el HTML actual, evita respuestas de guardado automático obsoletas y diagnostica saltos del cursor, remontajes y la limpieza de Strict Mode.

Validación de formularios y campos obligatorios

Valida un campo obligatorio de RichTextEditor sin contar el HTML vacío como contenido. Sincroniza el textarea, muestra errores accesibles y repite la validación en el servidor.

Preguntas frecuentes

Respuestas a preguntas habituales sobre integración, configuración, licencias, compatibilidad con navegadores y solución de problemas de RichTextEditor.

IA

Herramientas de escritura con IA y cómo conectar tu propio proveedor.

AI Toolkit

Referencia del AI Toolkit: el cuadro de diálogo Ask AI, AI Chat, AI Review, el hook aiToolkitResolver, el contrato de operaciones, las acciones personalizadas y BYOK.

Proveedores de IA, streaming y DOCX

Resolvers integrados para OpenAI, Anthropic y Azure OpenAI, streaming con Server-Sent Events y exportación a DOCX en el servidor.

Almacén de claves BYOK (claves por inquilino)

Charge AI traffic to each tenant's own provider account via the IAiKeyVault abstraction, with reference implementations, admin REST API, and cost ledger.

Documentos y escritura

Exportación a Word, diseño de página, contenido estructurado y entrada.

Fidelidad y seguridad de DOCX

La matriz probada de compatibilidad de HTML a DOCX, el contrato de la solicitud, las convenciones del marcado de revisión, el límite de seguridad de las imágenes y las limitaciones intencionadas.

Paginación y numeración de estilo legal

Vista de página paginada (A4, Letter y Legal, con encabezados, pies de página y números de página) y numeración de estilo legal de varios niveles, en la licencia estándar.

Notas al pie, copiar formato y mayúsculas

Notas al pie con numeración automática, copiar formato para trasladar el formato de caracteres y cambio de mayúsculas y minúsculas (MAYÚSCULAS, minúsculas, Título, Oración), en la licencia estándar.

Contenido estructurado

Documentación de RichTextEditor sobre JSON estructurado, conversión a Markdown, renderizado de HTML estático y validación.

Dictado

Voz a texto mediante la Web Speech API. Botón de micrófono en la barra de herramientas, transcripciones provisionales en vivo y activación explícita.

Modo de barra de herramientas móvil

Hoja de estilos móvil opcional con áreas táctiles de 44x44, barra de herramientas con desplazamiento horizontal, cabecera fija y cuadros de diálogo como hojas inferiores.

Colaboración

Comentarios, control de cambios y edición en tiempo real.

Colaboración y revisión

Referencia de los plugins de colaboración y revisión: comandos de barra, @menciones, control de cambios, comentarios, historial de revisiones y presencia con Yjs.

Motor CRDT de Yjs por nodo

Cómo funciona por dentro textSync: 'crdt': el binding por nodo, la codificación de la presencia, el gestor de deshacer por autor y el distribuidor de rte.js.

Imágenes y cargas

Subir, guardar y explorar imágenes y archivos.

Subir archivos

Configura cargas de archivos seguras en RichTextEditor con un controlador personalizado, validación, callbacks de progreso y controles de almacenamiento en el servidor.

Ruta de la galería de imágenes

Apunta el cuadro de diálogo Insert Gallery a tus propias imágenes: el contrato JSON de las carpetas, cómo se convierte una carpeta en una URL y código de endpoint para ASP.NET, ASP.NET Core y PHP.

Guardar imágenes como archivos

Configuración de imágenes para producción: crea la carpeta de cargas y de la galería, conecta el controlador de carga, desactiva la incrustación en base64, rechaza base64 en el servidor y pasa a archivos las imágenes en base64 existentes. ASP.NET Core, ASP.NET y PHP.

Solucionar problemas de carga de imágenes

Diagnostica paso a paso la carga de imágenes de RichTextEditor: solicitudes que no aparecen, errores 403 y 413, respuestas no válidas, URL de imagen rotas e imágenes perdidas después de guardar.

Proveedores de carga en la nube

Send uploads to S3, Azure Blob, Cloudinary, or any custom backend via IRichTextBoxUploadStore. Reference implementations included.

Personalizar y ampliar

Barras de herramientas, comandos, eventos y tus propios plugins.

Fundamentos de la API

El editor ofrece métodos del lado del cliente para leer y actualizar el contenido.

Referencia de elementos de la barra de herramientas y los menús

Every toolbar and menu item identifier RichTextEditor supports, grouped by category, for building custom toolbars in config.toolbar strings.

Todos los comandos (execCommand)

Referencia completa de comandos de execCommand(): formato, bloques, listas, tablas, medios y comandos de cuadros de diálogo, con sus argumentos.

Todas las propiedades

Las propiedades de solo lectura de una instancia de RichTextEditor, para acceder desde tu código a los objetos relacionados con el editor. Con ejemplos.

Todos los métodos

Referencia completa de los métodos de la API de JavaScript de las instancias de RichTextEditor: contenido, selección, comandos, cuadros de diálogo y ciclo de vida.

Gestionar eventos

Referencia de runjsevent: conecta los botones de la barra de herramientas a tus propios controladores de JavaScript y reacciona a los comandos del editor desde el código de la aplicación.

Escribe tu primer plugin

Crea un plugin de RichTextEditor de principio a fin: registro, valores predeterminados de configuración, un botón de la barra de herramientas, un comando, el bus de eventos y lo que hace con el contenido guardado.

Tamaño del bundle y subconjuntos de plugins

Todos los plugins vienen en all_plugins.min.js de forma predeterminada. Carga solo los que usas y el editor baja de 529 KB a 214 KB con gzip. Presets medidos para blog, documentos, revisión y colaboración, con las etiquetas script de cada uno.

Las funciones, una por una

Qué hace cada función, cómo activarla y sus opciones.

Selector de emojis

Un selector con búsqueda de 1,037 emojis en ocho categorías, con una pestaña de usados recientemente y navegación con teclado. Los emojis se guardan como caracteres Unicode normales.

Autocompletado de emojis

Escribe :smile: para obtener el emoji, o dos puntos y unas letras para elegir de una lista. Mapa de códigos cortos, cómo añadir tus propios códigos y deshacer.

Plantillas de contenido

Ofrece documentos predefinidos en un cuadro de diálogo con búsqueda y vistas previas en vivo. Cómo definir htmlTemplates, sus formatos y qué significa sustituir el contenido.

Ecuaciones matemáticas

Inserta ecuaciones TeX y LaTeX desde un cuadro de diálogo con vista previa en vivo. Cómo usa KaTeX o MathJax de tu página, qué se guarda y cómo mostrarlo.

Diagramas Mermaid

Dibuja diagramas de flujo, de secuencia, circulares y de Gantt a partir de texto Mermaid. Carga Mermaid o renderiza en tu servidor; qué se guarda y cómo mostrarlo después.

Tarjetas de enlaces

Inserta un enlace como una tarjeta de vista previa con título, descripción, icono e imagen. El editor no obtiene datos: conecta bookmarkResolver a tu propio endpoint.

Incrustación automática

Pega un enlace de YouTube, Vimeo, Loom u otro video en una línea independiente para crear un reproductor 16:9. Sitios compatibles, proveedores propios y marcado guardado.

Chips inteligentes

Chips en línea de fecha, persona y enlace que guardan un valor legible por máquina. Fechas rápidas, sugerencias de tu propio chipResolver y marcado guardado.

Tablas de diseño

Marca las tablas que solo distribuyen contenido con role=presentation para que los lectores de pantalla omitan la cuadrícula. Comandos, menú con barra, API y cambios que se realizan.

@menciones

Escribe @ para elegir una persona de una lista estática o de una búsqueda en tu servidor. El chip guarda el id de la persona en el HTML para que tu servidor sepa a quién se mencionó.

Autocompletado con texto fantasma

Sugerencias grises en línea después del cursor, procedentes de una función resolver que tú escribes. Tab acepta y Esc descarta. No se incluye ningún modelo; llama a tu propio endpoint de IA.

Código en línea

Marca una palabra o selección como código con el botón o comando inlinecode. Guarda un elemento <code> simple; pulsa de nuevo el botón para quitar el formato de código.

Contraer secciones por encabezado

Contrae la sección bajo un encabezado haciendo clic en la flecha contigua o desde un script. La contracción solo afecta a la pantalla; el HTML guardado conserva todas las secciones intactas.

Cursor entre bloques

Añade un párrafo antes de una tabla inicial o entre dos tablas, líneas o imágenes con una flecha del teclado, un clic en el hueco o la línea indicadora azul entre bloques.

Ordenación de tablas y números de fila

Ordena las filas de una tabla por una columna con detección de números, importes y fechas, añade una columna de números de fila que se renumera automáticamente y mueve filas y columnas desde los menús.

Estadísticas de legibilidad

Flesch Reading Ease, nivel Flesch-Kincaid, tiempo de lectura y recuentos de palabras, oraciones y sílabas, calculados en el navegador. Se muestran en un cuadro de diálogo o se leen desde un script.

Lectura en voz alta

Lee el documento o la selección en voz alta con la síntesis de voz del navegador, oración a oración, con controles de reproducción, pausa, voz y velocidad en una pequeña barra.

Editor de imágenes

Recorta, gira, voltea, dibuja, añade texto o aplica filtros a una imagen del documento. Save envía un PNG a través de tu controlador de carga o lo incrusta como una URL de datos.

Revisión ortográfica

Revisión ortográfica del navegador en el área de edición y un comando Spell Check que muestra un panel de revisión con sugerencias de tu propio servicio ortográfico.

Idioma de fragmentos de texto

Marca una palabra o un pasaje como francés, hebreo u otro idioma con span lang para que los lectores de pantalla lo pronuncien correctamente (WCAG 3.1.2, Idioma de las partes).

Interfaz de derecha a izquierda

Invierte la barra de herramientas, los menús, los cuadros de diálogo y la barra de estado para usuarios de árabe, hebreo, persa y urdu, automáticamente o siempre. El contenido no cambia.

Importar estilos

Rellena los menús de estilos de párrafo, en línea, imagen y enlace con las clases CSS de las hojas de estilos de tu sitio, clasificadas por el elemento de cada selector.

HTML para correo electrónico

getEmailHTML() copia los estilos calculados en línea, elimina clases e ids y envuelve el contenido en una tabla de ancho fijo para que conserve su formato en los clientes de correo.

Varias regiones editables

Agrupa varios editores, como título, resumen y cuerpo, para que solo la región en uso muestre una barra de herramientas y una API guarde y cargue todas las regiones juntas.

Shadow DOM

Ejecuta el editor dentro de una raíz de sombra o un componente web. El plugin copia las hojas de estilos del editor a la raíz de sombra, incluidas las que se añaden después.

Accesibilidad de los cuadros de diálogo

Asigna a los cuadros de diálogo del editor el rol dialog, un nombre tomado de su título y nombres accesibles para sus campos, para que los lectores de pantalla anuncien URL en vez de edit.

Accesibilidad y operación

Conformidad con WCAG y cómo ejecutar el editor en producción.

Accesibilidad (WCAG 2.2 AA)

Objetivo de conformidad con WCAG 2.2 nivel AA, qué funciona hoy, carencias conocidas y combinaciones de tecnologías de apoyo compatibles con RichTextEditor.

Reglas del comprobador de accesibilidad

Todas las reglas que aplica al contenido el comprobador de accesibilidad integrado, qué detecta cada una, cuáles tienen reparación con un clic y la API de JavaScript para ejecutarlo tú mismo.

Operación en producción

Ejecutar RichTextEditor y RichTextBox.AspNetCore en producción: limitación de frecuencia, reintentos HTTP, registro de auditoría, sondeos de estado, idempotencia y BYOK.

Referencia de métodos

Cada método del editor, con su propia página.

Eventos

Los eventos que lanza el editor y cómo escucharlos.

¿Prefieres verlo en funcionamiento?

Cada función de esta documentación tiene una demo en vivo que puedes editar e inspeccionar.

Ver las demosPreguntar a soporte