JavaScript Rich Text Editor - A WYSIWYG Markdown Editor
- Edite HTML WYSIWYG con herramientas enriquecidas para aplicaciones web y móviles.
- Intégrelo en blogs, mensajes, compositores de correo electrónico y foros.
- Úselo como editor en línea para la edición in situ de cualquier elemento editable.
- Diseño de interfaz de usuario y personalización de barra de herramientas de vanguardia.
Trusted by the world’s leading companies
Visión general
El JavaScript Rich Text Editor es un editor HTML WYSIWYG y un editor Markdown WYSIWYG repleto de funciones. Se utiliza ampliamente para crear blogs, publicaciones en 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. Cuenta con varias herramientas para editar y dar formato a contenido enriquecido, y devuelve marcado HTML válido o contenido Markdown (MD). Los usuarios pueden insertar imágenes, enlaces, tablas y listas con su arquitectura modular.
¿Por qué elegir el Syncfusion JavaScript Rich Text Editor?
Editor WYSIWYG
El control JavaScript Rich Text Editor se puede utilizar como un editor HTML WYSIWYG o un editor Markdown, y también admite la edición en iframe con características de iframe configurables.
Interacción sencilla
Puede dar formato fácilmente al texto y a los párrafos configurando los colores de primer plano y de 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 control JavaScript Rich Text Editor ofrece una variedad de herramientas y opciones. Por lo tanto, puede insertar rápidamente imágenes, vídeos, hipervínculos y tablas; combinar celdas de tabla; y configurar teclas.
Vista previa del 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
El WYSIWYG Rich Text Editor para JavaScript 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. Los comandos de las herramientas se agrupan en función de funciones relacionadas.
Se adapta a cualquier resolución
El Rich Text Editor tiene un diseño altamente receptivo y optimizado para ordenadores de sobremesa, tabletas y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que utilizan iOS, Android o Windows OS.
Integración con librerías de terceros
Es fácil integrar librerías de terceros, como un corrector ortográfico o CodeMirror, con el Rich Text Editor para mejorar el contenido.
Globalización y localización
Permita que usuarios de diferentes regiones utilicen el Rich Text Editor formateando fechas, divisas y numeración según sus preferencias.
Rich Text Editor preparado para IA
Transforme sus aplicaciones JavaScript con nuestro Rich Text Editor preparado para IA, que cuenta con corrección gramatical, soporte multilingüe, parafraseo y resumen.
Ejemplo de código de JavaScript Rich Text Editor
Comience fácilmente con el JavaScript Rich Text Editor utilizando unas sencillas líneas de código HTML y TypeScript, como se demuestra a continuación. Explore también este ejemplo de JavaScript Rich Text Editor, que muestra cómo renderizar y configurar el control.
<div class="control-section">
<div id="defaultRTE">
</div>
</div>import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import {RichTextEditor, Toolbar, Link, Image, HtmlEditor
} from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor);
let defaultRTE: RichTextEditor = new RichTextEditor({
value: `<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 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>`
});
defaultRTE.appendTo('#defaultRTE');Barra de herramientas del editor HTML
La barra de herramientas del editor HTML WYSIWYG proporciona una variedad de comandos para editar y dar formato al contenido. Dé formato a texto y párrafos e inserte imágenes, hipervínculos, tablas y listas. Los comandos de las herramientas se agrupan en función de funciones relacionadas.
Barra de herramientas de varias filas
Los comandos de la barra de herramientas del editor WYSIWYG HTML5 que se desbordan se envuelven en las siguientes filas dentro de la barra de herramientas.
Barra de herramientas expandible
Los comandos de la barra de herramientas que se desbordan y quedan ocultos en la siguiente fila se vuelven visibles cuando se expande la barra 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 dar formato a estos elementos rápidamente.
Barra de herramientas flotante
La barra de herramientas del editor WYSIWYG HTML5 no se queda fija en la parte superior del editor. Flota dentro del área del editor al desplazarse por la página actual.
Totalmente personalizable
Los botones de la barra de herramientas del control HTML5 Rich Text Editor son totalmente personalizables. Añada o elimine botones y agrupe comandos por categoría. Esto ayuda a diseñar la barra de herramientas según las necesidades de la aplicación, como para la edición de blogs HTML, la redacción de correos electrónicos HTML y más.
Herramienta personalizada
Añada sus propios comandos (herramientas) con acciones a los comandos integrados en la barra de herramientas.
Modo inline
El JavaScript Rich Text Editor muestra un editor HTML inline cuando se hace clic o se selecciona el contenido en un área editable.
Mención y hashtag
Al redactar contenido en el JavaScript Rich Text Editor, se pueden etiquetar usuarios o grupos o seleccionarlos de una lista de sugerencias.
Configuraciones de las teclas Enter y Shift+Enter
Personalice las etiquetas insertadas al pulsar la tecla Enter y las teclas Shift + Enter. Puede configurar el control para insertar etiquetas específicas como P, que crea una etiqueta <p>; DIV, que crea una etiqueta <div>; y BR, que crea una etiqueta
cuando se utiliza cualquier combinación de teclas.
Experiencia de edición
El control JavaScript Rich Text Editor ofrece 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 de servidor con leyendas de imagen y luego vincule URLs a las imágenes. Suba imágenes a un servidor con la funcionalidad de arrastrar y soltar o de subida 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 de visualización, descripción emergente y enlace para abrir en una nueva ventana.
Insertar tablas
Inserte y edite tablas HTML para mostrar datos tabulares en forma de cuadrícula en el JavaScript WYSIWYG Rich Text Editor. Manipule la tabla y sus elementos dinámicamente: inserte o elimine filas y columnas; cambie el tamaño de toda una tabla, filas o columnas; y elimine una tabla.
Combinar y dividir celdas de tabla
Combine dos o más celdas de fila o columna en una sola celda con sus contenidos. Además, una sola celda puede dividirse tanto horizontal como verticalmente.
Alineación de texto
Hay ajustes integrados disponibles para justificar el contenido o alinearlo a la izquierda, al centro o a la derecha.
Insertar emoji
Incorpore emojis en su contenido. Busque en una extensa colección de emojis, seleccionando los que mejor se adapten a su mensaje. Acceda al selector de emojis simplemente pulsando la tecla de dos puntos (:) en el JavaScript Rich Text Editor.
Formato de texto
- Dé formato al contenido seleccionado, a párrafos enteros o a palabras o caracteres específicos.
- Dé formato a encabezados, citas, código, párrafos, etc.
- Ponga en negrita, cursiva, subraye, tacha o ponga en mayúsculas letras y palabras.
- Cambie la sangría y el espaciado de los párrafos.
- Seleccione fuentes y tamaños de fuente.
- Utilice subíndices y superíndices.
- Seleccione el color de la fuente y el color de fondo para el contenido.
Añadir listas personalizadas
Cree listas ordenadas (numeradas) o desordenadas (con viñetas) para organizar el contenido en el JavaScript Rich Text Editor. El control ofrece soporte para cambiar la apariencia de las viñetas en las listas desordenadas a círculos o cuadrados. También admite diferentes formatos de numeración para listas ordenadas, como griego en minúsculas o romano en mayúsculas.
Editor de texto a pantalla completa
Ponga el editor JavaScript HTML5 a pantalla completa (un editor de página completa) para editar el contenido.
Pegar desde Microsoft Word y Excel
El editor JavaScript Markdown ofrece opciones integradas para pegar contenido con imágenes en el editor desde Microsoft Word, Microsoft Outlook y Microsoft Excel filtrando etiquetas, atributos y estilos. Además, hay opciones para elegir si el contenido debe pegarse como texto sin formato, estilos limpios o estilos de formato de origen.
Hipervínculo automático de URL
El JavaScript Rich Text Editor está configurado para convertir automáticamente el texto en un hipervínculo cuando se escribe una URL como texto sin formato.
Validaciones de formularios JavaScript
El JavaScript Rich Text Editor es un control de formulario que admite formularios HTML y obtiene 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 JavaScript Rich Text Editor cuenta con soporte de redimensionamiento integrado que ensancha o encoge el área de contenido.
Insertar una imagen a través del administrador de archivos
El administrador de archivos integrado dentro del Rich Text Editor se puede utilizar para insertar y subir imágenes desde el almacenamiento en la nube o un servidor.
Pintor de formato
Utilice el pintor de formato para copiar el formato y aplicarlo a su contenido. Acceda al pintor de formato a través de la barra de herramientas o de los atajos de teclado para una aplicación rápida y sencilla. Aproveche el modo persistente haciendo doble clic en el botón de la barra de herramientas, lo que le permite aplicar formatos a múltiples ubicaciones.
Cortar, copiar y pegar
El Rich Text Editor permite a los usuarios utilizar operaciones de portapapeles (cortar, copiar y pegar).
Gestor de deshacer/rehacer
El Rich Text Editor gestiona el historial de acciones de deshacer/rehacer para almacenar las acciones de edición.
Imprimir el contenido del editor de texto
Imprima el contenido del WYSIWYG Rich Text Editor ya sea utilizando la opción de imprimir de la barra de herramientas o mediante programación con el formato aplicado.
Editor WYSIWYG táctil y receptivo
El editor de texto JavaScript (editor HTML móvil) reconoce 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 receptivo y adaptado a dispositivos móviles ofrece la mejor experiencia de usuario en todos los formatos de móvil, tableta y escritorio.
Temas integrados y personalizables
JavaScript Rich Text Editor se entrega con varios temas integrados: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent y contraste alto.
APIs amigables para el desarrollador
Existen suficientes APIs del lado del cliente disponibles para optimizar la edición de contenido.
Accesibilidad del editor HTML
Navegación por teclado
El componente JavaScript Rich Text Editor garantiza que cada celda sea accesible mediante el teclado. Funciones principales como ordenar, seleccionar y editar pueden realizarse solo con comandos de teclado; no se requiere interacción con el ratón. Esto ayuda a crear aplicaciones altamente accesibles utilizando este componente.
Lector de pantalla
La vista de JavaScript Rich Text Editor tiene soporte completo de accesibilidad WAI-ARIA. Su interfaz de usuario 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 válidas de la interfaz de usuario son fácilmente accesibles a través de tecnologías de asistencia como los lectores de pantalla.
De derecha a izquierda (RTL)
El HTML5/JavaScript Rich Text Editor admite la representación de derecha a izquierda, lo que permite que el 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 los usuarios de idiomas RTL como el árabe, el farsi y el hebreo.
Otros frameworks compatibles
El Rich Text Editor también está disponible para los frameworks Blazor, React, Angular y Vue. Explore sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El JavaScript Rich Text Editor funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
¿No está seguro de cómo crear su primer JavaScript Rich Text Editor? Nuestra documentación puede ayudarle.
Me encantaría leerla ahoraMás de 145+ controles de interfaz de usuario de JavaScript
TODOS LOS CONTROLES
COMPONENTES INTELIGENTES
CUADRÍCULAS
MENÚS DESPLEGABLES
ENTRADAS DE DATOS
VISUALIZACIÓN DE DATOS
NAVEGACIÓN
BOTONES
CHAT INTERACTIVO
NOTIFICACIÓN
FORMULARIOS
Preguntas frecuentes
¿Por qué debería elegir el Syncfusion JavaScript Rich Text Editor?
El Syncfusion Rich Text Editor le permite:
Editar contenido WYSIWYG HTML y Markdown con un amplio conjunto de herramientas para aplicaciones web y móviles modernas.
Incorporar fácilmente el editor en aplicaciones tipo editor de blogs, mensajes, redactor de correos HTML y foros de discusión.
Crear una barra de herramientas flotante o un editor inline que le permita seleccionar cualquier elemento editable de la página y editarlo in situ.
Disfrutar de una configuración y API sencillas.
- Renderizar en todos los navegadores modernos con facilidad.
- Utilizar una interfaz de usuario táctil y receptiva.
Aprovechar los amplios recursos de aprendizaje, como demos y documentación para empezar rápidamente con el control.
¿Cuál es el precio del Syncfusion JavaScript Rich Text Editor?
No vendemos el JavaScript Rich Text Editor por separado. Solo está disponible para su compra como parte de la suite de componentes Essential Studio. Esta contiene más de 1,600 componentes y frameworks, incluido el JavaScript Rich Text Editor. Incluye soporte y actualizaciones hasta que expire la suscripción. Además, es posible que ofrezcamos descuentos basados en promociones actualmente activas. Póngase en contacto con nuestros especialistas de producto para obtener un presupuesto para su situación y comprobar si hay descuentos adicionales.
¿Dónde puedo encontrar la demo del Syncfusion JavaScript Rich Text Editor?
Puede encontrar nuestra demo del JavaScript Rich Text Editor aquí.
¿Puedo comprar el componente Syncfusion JavaScript Rich Text Editor por separado?
No, nuestros más de 1,600 componentes y frameworks para web, móvil y escritorio, incluido nuestro JavaScript Rich Text Editor, no se venden por separado. Sin embargo, hemos puesto un precio competitivo al producto, por lo que solo cuesta un poco más de lo que cobran otros proveedores por su componente JavaScript Rich Text Editor solamente. También hemos comprobado que, en nuestra experiencia, nuestros clientes suelen empezar utilizando uno de nuestros productos y luego se expanden rápidamente a varios, por lo que creímos que lo mejor era ofrecer todos los más de 1,600 componentes y frameworks por una cuota de suscripción. Además, es posible que podamos ofrecer descuentos basados en promociones actualmente activas. Póngase en contacto con nuestros especialistas de producto para ver si reúne los requisitos para obtener descuentos adicionales.
¿Puedo descargar y utilizar el Syncfusion JavaScript Rich Text Editor 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 menos de 1 millón de dólares de ingresos brutos anuales, 5 o menos desarrolladores y 10 o menos empleados en total.
¿Cómo empiezo con el Syncfusion JavaScript Rich Text Editor?
Un buen lugar para empezar sería nuestra completa documentación de inicio.
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.
Excelente suite de componentes
Un conjunto muy completo de componentes, que tiene ventaja sobre otros proveedores importantes que ofrecen componentes. Se requiere mucho menos código para utilizarlos y muestras de código para componentes más complejos. Se integra bien con otros componentes de terceros.
John A.
Desarrollador C# (Contratista)
Perfecto para cualquier desarrollador
Syncfusion Essential Studio cuenta con excelentes funciones que se actualizan o añaden constantemente de forma regular. El soporte es excepcional: respuestas rápidas y profesionales. El equipo de soporte le proporciona ejemplos de código. En cuanto a los errores, siempre intentan incluir la solución en la siguiente versión.
Dejan D.
Director Ejecutivo
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 de Syncfusion JavaScript Rich Text Editor
Soporte técnico
Contactar con soporte
Foro de la comunidad
Solicitudes de funciones e informes de errores
Contactar con soporte
Foro de la comunidad
Solicitudes de funciones e informes de errores
UI Kits
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.
