React Rich Text Editor - Un editor de Markdown WYSIWYG
- Edite HTML y Markdown con un editor WYSIWYG para apps web y móviles modernas.
- Integre el editor en blogs, mensajes, correos HTML y foros fácilmente.
- Cree una barra flotante o editor en línea para editar contenido directamente.
Quick Overview Video
Trusted by the world’s leading companies
Visión general
El Editor de texto enriquecido de React es un editor HTML WYSIWYG y un editor Markdown WYSIWYG con muchas funciones. El Editor de texto enriquecido se utiliza ampliamente para crear blogs, publicaciones de foros, secciones de notas, tickets de soporte (incidentes), secciones de comentarios, aplicaciones de mensajería y más. El control proporciona una interfaz de usuario eficiente para una mejor experiencia de edición con soporte móvil. Tiene una variedad de herramientas para editar y formatear contenido rico y devuelve un marcado HTML válido o contenido Markdown (MD). Permite a los usuarios insertar imágenes, enlaces, tablas y listas con arquitecturas modulares.
¿Por qué elegir el Editor de texto enriquecido de React de Syncfusion?
Editor WYSIWYG
El componente Editor de texto enriquecido de React puede utilizarse como editor HTML WYSIWYG o como editor Markdown, y también es compatible con la edición Iframe con características de Iframe configurables.
Interacción sencilla
Puedes formatear fácilmente el texto y los párrafos ajustando los colores del primer plano y del fondo del editor; añadiendo listas personalizadas ordenadas y desordenadas; y especificando la fuente, cursiva, subrayado, tachado y negrita.
Edición flexible
Para una mejor experiencia de edición, el componente Editor de texto enriquecido de React ofrece una variedad de herramientas y opciones. Así, puedes insertar rápidamente imágenes, vídeos, hipervínculos y tablas; fusionar celdas de tabla; y configurar teclas.
Previsualizar el código HTML
Examine y edite el código HTML directamente en el código fuente y vea el resultado de la vista previa (editor HTML en vivo).
Barra de herramientas con un amplio conjunto de herramientas
El editor de texto enriquecido WYSIWYG para React ofrece una variedad de opciones de barra de herramientas que son totalmente personalizables. Las opciones permiten barras de herramientas de varias filas, expandibles, rápidas y flotantes. Las herramientas de comando se agrupan según la funcionalidad relacionada.
Se adapta a cualquier resolución
El Editor de texto enriquecido tiene un diseño altamente receptivo y optimizado para escritorios, pantallas táctiles y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que utilizan iOS, Android o Windows OS.
Integrar con librerías de terceros
Fácil de integrar bibliotecas de terceros como corrector ortográfico, code mirror, etc., con el editor de texto enriquecido para mejorar el contenido en el editor de texto HTML de React.
Globalización y localización
Permite a usuarios de diferentes ubicaciones utilizar el Editor de texto enriquecido formateando fechas, moneda y numeración para que se adapten a sus preferencias.
Editor de texto enriquecido con IA para una escritura más inteligente
Mejore su escritura con el Editor de Texto enriquecido preparado para la IA. Corrija la gramática, reformule el contenido, cambie de idioma y resuma textos al instante, todo dentro del editor.
Ejemplo de código del Editor de texto enriquecido de React
Comience fácilmente con el Editor de texto enriquecido de React utilizando unas pocas líneas de código TSX como se muestra a continuación. Explore también el ejemplo del Editor de texto enriquecido de React que muestra cómo renderizar y configurar el Editor de texto enriquecido en React.
import { HtmlEditor, Link, Image, Inject, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
public render() {
return (
<RichTextEditorComponent>
<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling Markdown editing.</p>
</li>
</ul>
<Inject services={[Toolbar, HtmlEditor, Link, Image]} />
</RichTextEditorComponent>
);
}
}
export default App;Barra de herramientas del editor HTML
La barra de herramientas del editor de texto WYSIWYG de React proporciona una variedad de comandos para editar y formatear el contenido. Formatea texto, párrafos, inserta imágenes, hipervínculos, tablas, listas, etc. Los comandos de las herramientas se agrupan según su funcionalidad relacionada.
Barra de herramientas de varias filas
Los comandos de la barra de herramientas que desbordan se envuelven en las siguientes filas dentro de la barra de herramientas.
Expandir barra de herramientas
Los comandos de la barra de herramientas que se desbordan y se ocultan en la siguiente fila se vuelven visibles cuando la barra de herramientas se expande utilizando el icono de expansión.
Barra de herramientas rápida
Esta barra de herramientas contiene comandos de uso frecuente relacionados con texto, imágenes, tablas y enlaces. Ayuda a acceder y formatear los elementos rápidamente y también a personalizarlos.
Barra de herramientas flotante
La barra de herramientas del editor HTML WYSIWYG no se adhiere a la parte superior del editor, sino que flota dentro del área del editor al desplazar la página actual.
Totalmente personalizable
La barra de herramientas del componente Editor de texto enriquecido de React es totalmente personalizable con sus botones. Añade o elimina botones y agrupa comandos según la categoría. Esto ayuda a diseñar la barra de herramientas según las necesidades de la aplicación, como para un editor de blog HTML o un compositor de correo electrónico HTML.
Herramienta personalizada
Añada sus propios comandos (herramientas) con acciones a la barra de herramientas junto con los comandos integrados.
Modo en línea
El Editor de texto enriquecido de React muestra un editor HTML en línea cuando se hace clic o se selecciona el contenido en un área editable.
Mención y hashtag
Al redactar contenido en el Editor de texto enriquecido de React, los usuarios o grupos pueden ser etiquetados o seleccionados de la lista de sugerencias.
Experiencia de edición
El componente Editor de texto enriquecido de React proporciona una amplia gama de herramientas y opciones para una mejor experiencia de edición.
Insertar imágenes
Inserte imágenes en el contenido desde una ruta local o una ruta del servidor con subtítulos de imagen y luego vincule URL a las imágenes. Cargue imágenes a un servidor con arrastrar y soltar o carga de archivos. Además, el editor ofrece opciones para insertar imágenes en formatos BLOB o Base64.
Insertar hipervínculos
Inserte o cambie los hipervínculos con opciones de personalización como texto a mostrar, información sobre herramientas y enlaces que se abrirán en una nueva ventana.
Insertar tablas
Inserte y edite tablas HTML para mostrar datos tabulares tipo cuadrícula en el Editor de texto enriquecido WYSIWYG. Manipule la tabla y sus elementos dinámicamente (inserte y elimine filas y columnas, redimensione toda la tabla o filas o columnas, y elimine una tabla).
Fusión y división de celdas de tabla
Fusionar dos o más celdas de fila o columna en una sola celda con su contenido. Además, una sola celda se puede dividir tanto horizontal como verticalmente.
Alineación de texto
Alinee su contenido a la izquierda, centro o derecha, o justifíquelo.
Configuración de la tecla Enter y Shift+Enter
El Editor de texto enriquecido de React permite personalizar la etiqueta insertada al presionar las teclas Enter y Shift+Enter. Se pueden configurar las siguientes etiquetas:
- P: Cuando se configura ‘P’, al presionar Enter o Shift+Enter se creará una etiqueta ‘p’.
- DIV: Cuando se configura ‘DIV’, al presionar Enter o Shift+Enter se creará una etiqueta ‘div’.
- BR: Cuando se configura ‘BR’, al presionar Enter o Shift+Enter se creará una etiqueta ‘br’.
Formatear texto
- Formatee el contenido seleccionado, párrafos completos o palabras o caracteres específicos.
- Formatee encabezados, citas, código, párrafos, etc.
- Ponga en negrita, cursiva, subraye, tache o capitalice letras y palabras.
- Cambie la sangría y el espaciado de los párrafos.
- Seleccione fuentes y su tamaño.
- Utilice subíndices y superíndices.
- Seleccione el color de la fuente y el color de fondo para el contenido.
Añadiendo listas personalizadas
Cree listas ordenadas (numeradas) o desordenadas (con viñetas) para organizar el contenido en el Editor de texto enriquecido de React. Ofrece soporte para cambiar la apariencia de las viñetas en las listas desordenadas a círculos o cuadrados. También soporta diferentes formatos de numeración para listas ordenadas, como griegas en minúsculas o romanas en mayúsculas.
Editor de texto en pantalla completa
Haga que el Editor de texto enriquecido de React ocupe toda la pantalla (editor de página completa) para editar el contenido.
Pegar desde Microsoft Word y Excel
Pegue contenido con imágenes de Microsoft Word, Microsoft Outlook y Microsoft Excel en el editor filtrando etiquetas, atributos y estilos. Además, hay opciones para elegir si el contenido debe pegarse como texto sin formato, estilos limpios o estilos con formato original.
Hipervínculo automático de URL
El Editor de texto enriquecido de React está configurado para convertir automáticamente texto en un hipervínculo cuando se escribe una URL como texto sin formato.
Validaciones de formularios de React
El Editor de texto enriquecido de React soporta de forma transparente los formularios y obtiene los valores en las acciones de envío de formularios. Los dos tipos de validación son:
- Validación requerida
- Validación de longitud máxima
Limitar la longitud del contenido
Restrinja el número máximo de caracteres del contenido.
Editor redimensionable
El Editor de texto enriquecido de React tiene soporte integrado para redimensionar, lo que ayuda a ampliar o reducir el área de contenido.
Insertar una imagen a través del gestor de archivos
Utilice el gestor de archivos integrado para insertar imágenes desde el almacenamiento en la nube o el servidor.
Pincel de formato
Utilice el pincel de formato para copiar el formato sin esfuerzo y aplicarlo a su contenido, eliminando la necesidad de reformatear manualmente y ahorrándole un tiempo valioso. Acceda al pincel de formato a través de la barra de herramientas o de prácticos atajos de teclado para una aplicación rápida y fácil. Aproveche el modo pegajoso haciendo doble clic en el botón de la barra de herramientas, lo que le permite aplicar formatos a múltiples ubicaciones sin problemas.
Cortar, copiar y pegar
Utilice las operaciones del portapapeles (cortar, copiar y pegar).
Gestor de deshacer y rehacer
El Editor de texto enriquecido de React gestiona el historial de acciones de deshacer/rehacer para almacenar las acciones de edición, y también para personalizar los pasos de deshacer.
Imprimir el contenido del editor de texto
Imprima el contenido del Editor de texto enriquecido WYSIWYG con el estilo de formato aplicado, ya sea utilizando la opción de impresión de la barra de herramientas o programáticamente.
Editor WYSIWYG sensible y adaptable al tacto
El editor de texto enriquecido de React (editor HTML móvil) reconoce los gestos táctiles, lo que permite al usuario deslizar a la izquierda o a la derecha para mover la barra de herramientas. El diseño responsivo y adaptado a móviles ofrece la mejor experiencia de usuario en todos los formatos de teléfono móvil, tableta y escritorio.
Temas incorporados y personalizables
El Editor de texto enriquecido de React incluye varios temas integrados como Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent y alto contraste.
API fáciles de usar para desarrolladores
Hay suficientes API de cliente disponibles para optimizar el proceso de edición de contenido.
Accesibilidad del editor HTML
Navegación con teclado
El componente Editor de texto enriquecido de React asegura que cada celda sea accesible usando el teclado. Las principales características como ordenar, seleccionar y editar se pueden realizar solo con comandos de teclado; no se requiere interacción con el ratón. Esto ayuda a crear aplicaciones altamente accesibles usando este componente.
Lector de pantalla
La vista del Editor de texto enriquecido de React cuenta con soporte completo de accesibilidad WAI-ARIA. La interfaz de usuario del Editor de texto enriquecido incluye elementos visuales de alto contraste que ayudan a las personas con discapacidad visual a tener la mejor experiencia de visualización. Además, las descripciones de la interfaz de usuario válidas son fácilmente accesibles a través de tecnologías de asistencia como los lectores de pantalla.
De derecha a izquierda (RTL)
El Editor de texto enriquecido de React admite la renderización de derecha a izquierda, lo que permite que la dirección del texto y el diseño del editor de texto se muestren de derecha a izquierda. Esto mejora la experiencia del usuario y la accesibilidad para idiomas RTL como el árabe, el farsi, el hebreo, etc.
¿No sabes cómo crear tu primer Editor de texto enriquecido de React? Nuestros videos tutoriales y documentación pueden ayudarte.
Me encantaría verlo ahora Me encantaría leerlo ahoraDescubra el ecosistema completo de componentes React de Syncfusion
Explore más de 145+ componentes de interfaz de usuario de React que incluyen controles establecidos y listos para producción, y los últimos componentes puros de React creados de forma nativa para el desarrollo de aplicaciones web modernas.
-
Componentes de React
-
Componentes puros de React
-
COMPONENTES INTELIGENTESCUADRÍCULASEDITORESMENÚS DESPLEGABLESENTRADAS DE DATOSVISUALIZACIÓN DE DATOSNAVEGACIÓNBOTONESCHAT INTERACTIVONOTIFICACIÓNFORMULARIOS
-
CuadrículasVisualización de datosNavegaciónEntradas
Preguntas frecuentes
¿Por qué elegir el Editor de texto enriquecido de React de Syncfusion?
El Editor de texto enriquecido de React de Syncfusion admite las siguientes características:
Edite contenido HTML WYSIWYG y Markdown con un amplio conjunto de herramientas para aplicaciones web y móviles modernas.
Incorpórelo fácilmente en editores de blogs, mensajes, compositores de correo electrónico HTML y aplicaciones tipo foro de discusión.
Cree una barra de herramientas flotante o un editor en línea que le permita seleccionar cualquier elemento editable de la página y editarlo en el mismo lugar.
- Ofrece una interfaz de usuario rica en funciones para interactuar con el software.
- Configuración y API sencillas.
- Uno de los mejores editores de texto enriquecido de React del mercado que ofrece funciones interactivas.
- Compatible con todos los navegadores modernos.
- Compatible con dispositivos móviles y responsivo.
Amplios recursos de aprendizaje como demos y documentación para aprender rápidamente y empezar a utilizar el Editor de texto enriquecido de React.
¿Cuál es el precio del Editor de texto enriquecido de React de Syncfusion?
No vendemos el Editor de Texto Enriquecido de React por separado. Solo está disponible para su compra como parte de la licencia de equipo de Syncfusion. Esta contiene más de 1,600 componentes y frameworks, incluido el Editor de Texto Enriquecido de React. El precio de la licencia de equipo comienza en $395 al mes para 5 desarrolladores e incluye soporte y actualizaciones hasta que expire la suscripción. Además, podríamos ofrecer descuentos basados en promociones activas actualmente. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si califica para algún descuento adicional.
¿Dónde puedo encontrar la demostración del Editor de texto enriquecido de React de Syncfusion?
Puede encontrar nuestra demostración del Editor de texto enriquecido de React, que muestra cómo renderizar y configurar el Editor de texto enriquecido.
¿Puedo comprar el componente Editor de texto enriquecido de React de Syncfusion por separado?
No, nuestros más de 1,600 componentes y frameworks para web, móvil y escritorio, incluido nuestro Editor de Texto Enriquecido de React, no se venden individualmente. Solo están disponibles como parte de una licencia de equipo. Sin embargo, hemos fijado un precio competitivo para el producto, por lo que solo cuesta un poco más de lo que cobran otros proveedores por su componente de Editor de Texto Enriquecido solo. También hemos descubierto que, según nuestra experiencia, nuestros clientes suelen empezar utilizando uno de nuestros productos y luego amplían rápidamente a varios productos, por lo que consideramos que lo mejor era ofrecer todos los más de 1,600 componentes y frameworks por una tarifa de suscripción que comienza en $395 al mes para un equipo de 5 desarrolladores. Además, es posible que podamos ofrecer descuentos en función de las promociones activas actualmente. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si cumple los requisitos para obtener descuentos adicionales.
¿Puedo descargar y utilizar el Editor de texto enriquecido de React de Syncfusion de forma gratuita?
No, este es un producto comercial y requiere una licencia de pago. Sin embargo, también está disponible una licencia comunitaria gratuita para empresas y particulares cuyas organizaciones tengan unos ingresos brutos anuales inferiores a 1 millón de USD y cinco o menos desarrolladores.
¿Cómo empiezo a usar el Editor de texto enriquecido de React de Syncfusion?
Un buen lugar para empezar sería nuestra completa documentación de introducción.
Nuestros clientes nos aman
Con un excelente conjunto de herramientas y un gran equipo de soporte, Syncfusion® reduce el tiempo de desarrollo de los clientes.Estas son algunas de sus experiencias.
Nice suite of components
A very complete set of components, that has an edge on other major vendors which offer components. A lot less code required to use and code samples for more complete components. Integrates well with other 3rd party components.
John A.
C# Developer (Contract)
Perfect for any developer
The Syncfusion Essential Studio has excellent features that are updated or added constantly on a regular basis. The support is exceptional—fast and professional responses. The support team provides you with code samples. As for the bugs, they always try to include the fix in the next release.
Dejan D.
Chief Executive Officer
Ver historias de éxito reales
Desarrolladores de todo el mundo confían en Essential Studio de Syncfusion para simplificar proyectos complejos y acelerar la entrega. Con una amplia biblioteca de controles de interfaz de usuario, potentes SDK y soporte confiable, Essential Studio ayuda a los equipos a crear aplicaciones de nivel empresarial con confianza.
Explorar estudios de casoIndustria
Desarrollo de software
75% Reducción de costos
50% Desarrollo más rápido
Industria
Servicios públicos (petróleo y gas)
450+ horas ahorradas
Procesos optimizados y horas de esfuerzo de desarrollo ahorradas.
Funciones avanzadas y flexibles
Usuarios potenciados mediante una funcionalidad sólida y versátil.
Industria
Software y tecnología
1000+ horas ahorradas
Desarrollo acelerado con componentes de interfaz de usuario listos para empresa.
Gestión eficiente de archivos
Flujos de trabajo optimizados con bibliotecas de documentos sin crearlas desde cero.
Industria
Software y tecnología
2 años de retraso evitado
Se evitaron dos años de retrasos gracias a la planificación proactiva.
Entrega punctual
Proyectos entregados a tiempo utilizando controles de confianza.
Industria
Servicios de TI y consultoría de TI
Rendimiento Mejorado
Grandes conjuntos de datos gestionados con fácil personalización y depuración rápida.
Altamente personalizable
Controles plug-and-play con integración rápida de plantillas.
Industria
Servicios profesionales
Acceso instantáneo
Disponibilidad rápida de funciones y recursos.
Dependencias reducidas
Menos dependencias para un desarrollo más rápido.
Calificado por usuarios de todo el mundo
Recursos del Editor de texto enriquecido de React de Syncfusion
Kits de interfaz de usuario
Descarga de Figma
Descarga de Figma
Premios
Grandeza: Decir que la tienes es una cosa, pero significa más cuando otros la reconocen. Syncfusion® se enorgullece de haber recibido los siguientes premios de la industria.
Actividades recientes en los blogs del Editor de texto enriquecido de React
Las publicaciones del blog del Editor de texto enriquecido de React le guiarán en la creación de su primera aplicación con estos componentes de React. Proporcionan estrategias de resolución de problemas, describen características y funcionalidades, anuncian nuevas versiones de características, explican las mejores prácticas y muestran escenarios de ejemplo. Explore nuestras últimas publicaciones en nuestros canales de blog para obtener actualizaciones del Editor de texto enriquecido de React.
BLOG
Introduciendo el soporte de iconos Emoji en el Editor de texto enriquecido de React
3 DE ENERO DE 2025
BLOG
Integra fácilmente el editor de imágenes de React en el editor de texto enriquecido
19 DE NOVIEMBRE DE 2024
