Angular Rich Text Editor - Un editor de Markdown WYSIWYG
- Edite HTML WYSIWYG con herramientas enriquecidas para aplicaciones web y móviles.
- Se integra fácilmente en aplicaciones de blogs, mensajes, correos electrónicos y foros de discusión.
- Personalice los estilos utilizando una barra de herramientas rápida.
Trusted by the world’s leading companies
Resumen
El Rich Text Editor de Angular es un editor HTML y Markdown WYSIWYG (“lo que ves es lo que obtienes”) con muchas 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. Tiene una variedad de herramientas para editar y formatear contenido enriquecido y devolver marcado HTML válido o contenido Markdown (MD), y también permite a los usuarios insertar imágenes, enlaces, tablas y listas con una arquitectura modular.
¿Por qué elegir el Rich Text Editor de Syncfusion Essential Studio® Angular?
Editor WYSIWYG
El componente Rich Text Editor de Angular se puede utilizar como editor HTML WYSIWYG o como editor de Markdown, y también es compatible con la edición en Iframe con características de Iframe configurables.
Interacción fácil
Puede formatear fácilmente el texto y los párrafos configurando los colores de primer plano y fondo del editor, el tipo de fuente, la cursiva, añadiendo listas personalizadas ordenadas y no ordenadas, el subrayado, el tachado y la negrita.
Edición flexible
Para una mejor experiencia de edición, el componente Rich Text Editor de Angular ofrece una variedad de herramientas y opciones. Así, puede insertar rápidamente imágenes, videos, hipervínculos y tablas; fusionar 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 con un rico conjunto de herramientas
El Rich Text Editor WYSIWYG para Angular 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 la herramienta se agrupan según su funcionalidad relacionada.
Se adapta a cualquier resolución
El Rich Text Editor tiene un diseño altamente receptivo y optimizado para ordenadores de escritorio, pantallas táctiles y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que utilizan iOS, Android o Windows.
Integrar con bibliotecas de terceros
Fácil de integrar bibliotecas de terceros como corrector ortográfico, code mirror, etc., con el Rich Text Editor para mejorar el contenido en el editor de texto HTML de Angular.
Globalización y localización
Permite a los usuarios de diferentes idiomas utilizar el Rich Text Editor formateando fechas, moneda y numeración para adaptarse a sus preferencias.
Rich Text Editor preparado para IA para una productividad más inteligente
Escriba de forma más inteligente con el Rich Text Editor de Angular preparado para IA. Corrija instantáneamente la gramática, reescriba el contenido, traduzca entre idiomas y genere resúmenes sin salir del editor.
Ejemplo de código del Rich Text Editor de Angular
Comience fácilmente con el Rich Text Editor de Angular utilizando unas pocas líneas de código HTML y TS como se muestra a continuación. También explore el ejemplo del Rich Text Editor de Angular que muestra cómo renderizar y configurar el Rich Text Editor en Angular.
<div class="control-section">
<ejs-richtexteditor id='defaultRTE' [(value)]="rteValue">
</ejs-richtexteditor>
</div>import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
private rteValue: string = `<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>`;
}Barra de herramientas del editor HTML
La barra de herramientas del editor de texto WYSIWYG de Angular proporciona una variedad de comandos para editar y formatear el contenido. Utilice la barra de herramientas para formatear texto y párrafos; insertar 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.
Barra de herramientas expandible
Los comandos de la barra de herramientas desbordados que están ocultos en la siguiente fila se hacen visibles cuando la barra de herramientas se expande usando 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 (texto, imágenes, tablas, enlaces) rápidamente, y también a personalizarlos.
Barra de herramientas flotante
La barra de herramientas del editor HTML WYSIWYG de Angular no se fija en la parte superior del editor, sino que flota dentro del área del editor al desplazarse por la página actual.
Totalmente personalizable
Los botones de la barra de herramientas del componente Rich Text Editor de Angular son totalmente personalizables. Agregue o elimine botones y agrupe comandos según la categoría. Esto ayuda a los usuarios a diseñar la barra de herramientas según las necesidades de la aplicación, como para un editor de blogs HTML o un compositor de correo electrónico HTML.
Herramienta personalizada
Agregue sus propios comandos (herramientas) con acciones a la barra de herramientas junto con los comandos integrados.
Modo en línea
El Rich Text Editor de Angular 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 Rich Text Editor de Angular, se pueden etiquetar o seleccionar usuarios o grupos de la lista de sugerencias.
Experiencia de edición
El componente Rich Text Editor de Angular 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 cargar 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 para mostrar, información sobre herramientas y enlace que se abrirá en una nueva ventana.
Insertar tablas
Inserte y edite tablas HTML para mostrar datos tabulares tipo cuadrícula en el Rich Text Editor WYSIWYG. Manipule la tabla y sus elementos dinámicamente (insertar/eliminar filas y columnas, redimensionar toda la tabla o filas o columnas, y eliminar una tabla).
Fusión y división de celdas de tabla
Fusione dos o más celdas de fila y columna en una sola celda con su contenido. Además, una sola celda se puede dividir tanto horizontal como verticalmente.
Alineación de texto
Las configuraciones integradas están disponibles para alinear tu contenido a la izquierda, centro, derecha o justificarlo.
Configuración de las teclas Enter y Shift+Enter
El Rich Text Editor permite personalizar la etiqueta insertada al pulsar las teclas Enter y Shift+Enter. Se pueden configurar las siguientes etiquetas:
- P: Cuando se configura ‘P’, al pulsar Enter o Shift+Enter se creará una etiqueta ‘p’.
- DIV: Cuando se configura ‘DIV’, al pulsar Enter o Shift+Enter se creará una etiqueta ‘div’.
- BR: Cuando se configura ‘BR’, al pulsar Enter o Shift+Enter se creará una etiqueta ‘br’.
Formato de texto
- Formatear el contenido seleccionado, párrafos completos o palabras o caracteres específicos.
- Formatear encabezados, citas, código, párrafos, etc.
- Poner en negrita, cursiva, subrayar, tachar o capitalizar letras y palabras.
- Cambiar la sangría y el espaciado de los párrafos.
- Seleccionar fuentes y su tamaño.
- Usar subíndices y superíndices.
- Seleccionar el color de la fuente y el color de fondo para el contenido.
Añadir listas personalizadas
Cree listas ordenadas (numeradas) o no ordenadas (con viñetas) para organizar el contenido en el Rich Text Editor de Angular. Ofrece soporte para cambiar la apariencia de las viñetas de las listas no ordenadas a círculos o cuadrados. También es compatible con diferentes formatos de numeración para listas ordenadas, como letras griegas minúsculas o números romanos mayúsculos.
Editor de texto en pantalla completa
La opción integrada hace que el editor HTML WYSIWYG tenga un tamaño de pantalla completa (editor de página completa) para editar el contenido.
Pegar desde Microsoft Word y Excel
El Rich Text Editor de Angular 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 Rich Text Editor de Angular está configurado para convertir automáticamente el texto en un hipervínculo cuando se escribe una URL como texto sin formato.
Validaciones de formularios de Angular
El Rich Text Editor de Angular es compatible con los formularios controlados por plantillas y los formularios reactivos de Angular. Los dos tipos de validación son:
- Validación requerida
- Validación de longitud máxima
Limitar la longitud del contenido
Esta función permite al usuario restringir el número de caracteres en una sección en particular.
Editor redimensionable
El Rich Text Editor de Angular se puede redimensionar, de modo que los usuarios pueden ensanchar o encoger el área de contenido.
Insertar una imagen a través del gestor de archivos
El gestor de archivos integrado en el Rich Text Editor inserta y carga imágenes desde el almacenamiento en la nube o un servidor.
Funciones adicionales
Cortar, copiar y pegar
El editor de texto WYSIWYG de Angular típicamente permite a los usuarios usar operaciones de portapapeles (cortar, copiar y pegar).
Gestor de deshacer/rehacer
El Rich Text Editor de Angular 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 contenido del editor de texto
Imprime el contenido del Rich Text Editor WYSIWYG ya sea usando la opción de impresión de la barra de herramientas o de forma programática con el estilo de formato aplicado.
Editor WYSIWYG táctil y responsivo
El Rich Text Editor de Angular (editor HTML móvil) reconoce los gestos táctiles, permitiendo al usuario deslizar a la izquierda o a la derecha para mover la barra de herramientas. El diseño responsivo y adaptado para móviles proporciona la mejor experiencia de usuario en todos los móviles, tabletas y formatos de escritorio.
Temas integrados y personalizables
El Rich Text Editor de Angular se envía con varios temas integrados como Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent y alto contraste.
APIs amigables para desarrolladores
Existen suficientes API del lado del cliente disponibles para optimizar la edición de contenido.
Accesibilidad del editor HTML
Navegación por teclado
El componente Rich Text Editor de Angular garantiza que cada celda sea accesible utilizando el teclado. Las funciones principales 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 utilizando este componente.
Lector de pantalla
La vista del Rich Text Editor de Angular tiene soporte completo de accesibilidad WAI-ARIA. La interfaz de usuario del Rich Text Editor 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 Rich Text Editor de Angular 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.
Compatibilidad con la versión de Angular
Con la mejora continua en las versiones de Angular, el Rich Text Editor de Angular se mantiene actualizado para que sea compatible con las versiones desde la 4 hasta la última versión.
Otros frameworks compatibles
El Rich Text Editor está disponible para los frameworks Blazor, React, JavaScript y Vue. Explore sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El Rich Text Editor de Angular funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
¿No estás seguro de cómo crear tu primer Rich Text Editor de Angular? Nuestros videos tutoriales y documentación pueden ayudarte.
Me encantaría verlo ahora Me encantaría leerlo ahoraMás de 145+ componentes de interfaz de usuario de Angular
TODOS LOS COMPONENTES
COMPONENTES INTELIGENTES
CUADRÍCULAS
Visualización de datos
MENÚS DESPLEGABLES
VISUALIZADORES Y EDITORES DE ARCHIVOS
BOTONES
CHAT INTERACTIVO
ENTRADAS
NAVEGACIÓN
FORMAS
NOTIFICACIÓN
Preguntas frecuentes
¿Por qué elegir el Rich Text Editor de Syncfusion Essential Studio® Angular?
El editor de texto WYSIWYG de Syncfusion Angular ofrece las siguientes características:
Edite HTML WYSIWYG y contenido Markdown con un amplio conjunto de herramientas para aplicaciones web y móviles modernas.
Incorpore 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 en la página y editarlo en su lugar.
- Uno de los mejores editores de texto enriquecido de Angular del mercado que ofrece una interfaz de usuario rica en funciones para interactuar con el software.
- Configuración y API sencillas.
- Compatible con todos los navegadores modernos.
- Táctil y adaptable a dispositivos móviles.
Amplios recursos de aprendizaje, como demos y documentación para aprender rápidamente y empezar con el Rich Text Editor de Angular.
¿Cuál es el precio del Rich Text Editor de Syncfusion Angular?
No vendemos el Rich Text Editor de Angular por separado. Solo está disponible para su compra como parte de la licencia de equipo de Syncfusion. Esta licencia incluye más de 1,600 componentes y frameworks, incluido el Rich Text Editor de Angular. El precio de la licencia de equipo comienza en $395 por mes para 5 desarrolladores, e 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 hoy mismo para ver si califica para algún descuento adicional.
¿Dónde puedo encontrar la demostración del Rich Text Editor de Syncfusion Angular?
Puede encontrar nuestra demostración del Rich Text Editor de Angular, que muestra cómo renderizar y configurar el Rich Text Editor.
¿Puedo comprar el componente Rich Text Editor de Syncfusion Angular por separado?
No, nuestros 1,600+ componentes y frameworks para web, móvil y escritorio, incluido nuestro Rich Text Editor de Angular, 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 algunos otros proveedores cobran por su componente Rich Text Editor solo. También hemos descubierto que, en nuestra experiencia, nuestros clientes suelen empezar usando uno de nuestros productos y luego se expanden a varios productos rápidamente, por lo que consideramos que lo mejor era ofrecer todos los 1,600+ componentes y frameworks por una tarifa de suscripción que comienza en $395 por mes para un equipo de 5 desarrolladores. Además, es posible que podamos ofrecer descuentos basados en promociones actualmente activas. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si califica para algún descuento adicional.
¿Puedo descargar y utilizar el Rich Text Editor de Syncfusion Angular de forma gratuita?
No, es un producto comercial y requiere una licencia de pago. Sin embargo, hay una licencia comunitaria gratuita disponible para empresas e individuos cuyas organizaciones tengan ingresos brutos anuales inferiores a 1 millón de USD y cinco o menos desarrolladores.
¿Cómo empiezo a usar el Rich Text Editor de Syncfusion Angular?
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.
Document Editor For Angular
Great features, amazing package for start-ups / small businesses with the free license plan, excellent support. We use document editor component for angular. We also like the documentation.
Călin C,
Technology Consultant
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 Rich Text Editor de Syncfusion Angular
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 tutoriales y blogs del Rich Text Editor de Angular
Los vídeos tutoriales y las publicaciones de blog del Rich Text Editor de Angular le guiarán en la creación de su primera aplicación con estos componentes de Angular. Proporcionan estrategias de resolución de problemas, describen características y funcionalidades, anuncian nuevas versiones de funciones, explican las mejores prácticas y muestran escenarios de ejemplo. Explore nuestras últimas publicaciones en nuestro blog y canales de vídeos tutoriales para obtener actualizaciones del Rich Text Editor de Angular.
BLOG
20 DE NOVIEMBRE DE 2024
