Blazor Rich Text Editor - de editor Markdown
- Edición HTML WYSIWYG para apps web y móviles.
- Integración en blogs, mensajes, compositores de correo electrónico y foros.
- Editor en línea para editar cualquier elemento.
- Interfaz y barra de herramientas avanzada.
Quick Overview Video
Confiado por las empresas líderes del mundo
Descripción general
El Rich Text Editor de Blazor es un editor HTML WYSIWYG y un editor Markdown WYSIWYG con muchas funciones. El Rich Text Editor se utiliza para crear blogs, publicaciones en foros, secciones de notas, tickets de soporte (incidencias), secciones de comentarios, aplicaciones de mensajería y mucho más. El control proporciona una interfaz de usuario eficiente para una mejor experiencia de edición con soporte móvil. Dispone de una gran variedad de herramientas para editar y formatear contenido enriquecido 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 Rich Text Editor de Blazor de Syncfusion Essential Studio®?
Editor WYSIWYG
El componente Rich Text Editor de Blazor se puede usar como un editor HTML WYSIWYG o un editor Markdown, y también es compatible con la edición Iframe con sus características configurables.
Fácil interacción
Puedes formatear fácilmente el texto y los párrafos configurando los colores de primer plano y de fondo del editor, el tipo de fuente, la cursiva, el subrayado, el tachado y la negrita. También puedes añadir listas personalizadas ordenadas (numeradas) o no ordenadas (con viñetas) y cambiar el tamaño del editor.
Edición flexible
Para una mejor experiencia de edición, el componente Rich Text Editor de Blazor 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
Examina y edita el código HTML directamente en el código fuente y Visualiza el resultado de la previsualización (editor HTML en vivo).
Barra de herramientas con un amplio conjunto de herramientas
El Rich Text Editor WYSIWYG para Blazor 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 herramientas se agrupan en función de su funcionalidad relacionada.
Se adapta a cualquier resolución
El Rich Text Editor tiene un diseño altamente receptivo y optimizado para ordenadores de sobremesa, pantallas táctiles y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que usan iOS, Android o Windows OS.
Integración con bibliotecas de terceros
Fácil de integrar con bibliotecas de terceros como corrector ortográfico, editor de código, etc., con el Rich Text Editor para mejorar el contenido en el editor de texto HTML de Blazor.
Globalización y localización
Permite que usuarios de diferentes regiones utilicen el Rich Text Editor formateando fechas, divisas y numeración para adaptarse a sus preferencias.
Rich Text Editor inteligente con integración de IA
Potencia tu escritura con el Rich Text Editor de Blazor mejorado con IA. Corrige la gramática, reformula frases, traduce idiomas y resume contenido al instante, todo dentro de tu aplicación.
Ejemplo de código del Rich Text Editor de Blazor
Empieza fácilmente a utilizar el Rich Text Editor de Blazor con unas pocas y sencillas líneas de código C# como se muestra a continuación. También explora nuestro ejemplo de Rich Text Editor de Blazor que te muestra cómo renderizar y configurar el Rich Text Editor.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor @bind-Value="rteValue">
<RichTextEditorToolbarSettings Items="@Tools" />
</SfRichTextEditor>
@code {
private string rteValue { get; set; } = @"<p>The Rich Text Editor component is 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 <b>IFRAME</b> and <b>DIV</b> modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
</ul>";
private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
{
new ToolbarItemModel() { Command = ToolbarCommand.Bold },
new ToolbarItemModel() { Command = ToolbarCommand.Italic },
new ToolbarItemModel() { Command = ToolbarCommand.Underline },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.Formats },
new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
new ToolbarItemModel() { Command = ToolbarCommand.Image },
new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.Undo },
new ToolbarItemModel() { Command = ToolbarCommand.Redo }
};
}Barra de herramientas del editor HTML
La barra de herramientas del editor HTML WYSIWYG proporciona una variedad de comandos para editar y formatear el contenido. Puedes 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 se desbordan se agrupan en las filas siguientes dentro de la barra de herramientas.
Expandir barra de herramientas
Los comandos de la barra de herramientas que se desbordan y están ocultos en la siguiente fila se hacen visibles cuando la barra de herramientas se expande mediante 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 estos elementos rápidamente. Se puede personalizar la propia barra de herramientas.
La 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 del editor.
Totalmente personalizable
Los botones de la barra de herramientas son totalmente personalizables. Puedes añadir o eliminar botones y también agrupar comandos según la categoría. Puedes diseñar la barra de herramientas para que se adapte a lo que tu aplicación necesita, como un editor de blogs HTML o un compositor de correo electrónico HTML.
Herramienta personalizada
Añade tus propios comandos (herramientas) con acciones a la barra de herramientas junto con los comandos incorporados.
Modo en línea
Hace que el editor HTML en línea aparezca cuando haces clic o seleccionas el contenido en un área editable.
Mención y hashtag
Al redactar contenido en el Rich Text Editor de Blazor, los usuarios o grupos pueden ser etiquetados o seleccionados de la lista de sugerencias.
Experiencia de edición
El Rich Text Editor de Blazor con una interfaz de usuario rica proporciona una amplia gama de herramientas y opciones para una mejor experiencia de edición.
Insertar imágenes
Puedes insertar imágenes en tu contenido desde una ruta local o de servidor con leyendas de imagen y luego vincular URLs a las imágenes. Puedes subir imágenes a un servidor arrastrando y soltando o subiendo archivos. Además, el editor ofrece opciones para insertar imágenes en formato BLOB o Base64.
Insertar hipervínculos
Puedes insertar o cambiar 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
Puedes insertar y editar tablas HTML para mostrar datos tabulares tipo cuadrícula en el Rich Text Editor. Manipula la tabla y sus elementos dinámicamente: inserta o elimina filas y columnas, redimensiona la tabla completa o filas o columnas específicas, elimina una tabla.
Fusión y división de celdas de tabla
Fusiona dos o más celdas de fila y columna en una única celda con su contenido. Además, una única celda se puede dividir tanto horizontal como verticalmente.
Alineación de texto
Alinea tu contenido a la izquierda, centro o derecha, o justifícalo.
Configuración de las teclas Intro y Mayús+Intro
El Rich Text Editor permite personalizar la etiqueta insertada al pulsar las teclas Intro y Mayús+Intro. Se pueden configurar las siguientes etiquetas:
- P: Cuando se configura ‘P’, al pulsar Intro o Mayús+Intro se creará una etiqueta ‘p’.
- DIV: Cuando se configura ‘DIV’, al pulsar Intro o Mayús+Intro se creará una etiqueta ‘div’.
- BR: Cuando se configura ‘BR’, al pulsar Intro o Mayús+Intro se creará una etiqueta ‘br’.
Formateo de texto
- Formatea el contenido seleccionado, párrafos enteros o palabras o caracteres específicos.
- Formatea encabezados, citas, código, párrafos, etc.
- Pon en negrita, cursiva, subraya, tacha o capitaliza letras y palabras.
- Cambia la sangría y el espacio entre párrafos.
- Selecciona fuentes y su tamaño.
- Usa subíndices y superíndices.
- Selecciona el color de la fuente y el color de fondo para el contenido.
Añadir listas personalizadas
Crea listas ordenadas (numeradas) o no ordenadas (con viñetas) para organizar el contenido en el Rich Text Editor de Blazor. Ofrece soporte para cambiar la apariencia de las viñetas de las listas no ordenadas a círculos o cuadrados. También soporta 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 incorporada hace que el editor HTML WYSIWYG ocupe toda la pantalla (editor de página completa) para editar el contenido.
Pegar desde Microsoft Word y Excel
El Rich Text Editor de Blazor ofrece opciones integradas para pegar contenido con imágenes de Microsoft Word, Microsoft Outlook y Microsoft Excel al editor, filtrando etiquetas, atributos y estilos. Puedes controlar si el contenido se pega como texto plano, limpio de estilos o con los estilos de formato de origen.
Enlace automático de URL
El control convierte automáticamente el texto en un hipervínculo cuando un usuario teclea una URL como texto plano.
Validaciones de formularios de Blazor
El Rich Text Editor de Blazor es un componente de formulario que soporta sin problemas los formularios y obtiene valores al enviarlos. Los dos tipos de validación son:
- Validación de obligatoriedad
- Validación de longitud máxima
Limitar longitud del contenido
Los usuarios pueden restringir el número máximo de caracteres del contenido.
Editor redimensionable
El Rich Text Editor para Blazor tiene soporte integrado para redimensionar, lo que ayuda a ampliar o reducir el área de contenido.
Características adicionales
Cortar, copiar y pegar
El componente Rich Text Editor de Blazor permite a los usuarios utilizar operaciones de portapapeles (cortar, copiar y pegar).
Gestor de deshacer y rehacer
El Rich Text Editor de Blazor gestiona el historial de acciones de deshacer para almacenar las acciones de edición de los usuarios y permite a los usuarios personalizar los pasos de deshacer.
Imprimir el contenido del editor de texto
Imprime el contenido del Rich Text Editor WYSIWYG utilizando la opción de impresión de la barra de herramientas o programáticamente con el estilo de formato aplicado.
Editor WYSIWYG sensible y amigable con el tacto
El Rich Text Editor para Blazor (editor HTML móvil) reconoce los gestos táctiles, lo que permite al usuario deslizar el dedo hacia la izquierda o hacia 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 formatos de móviles, tabletas y ordenadores de escritorio.
Temas incorporados y personalizables
El Rich Text Editor de Blazor se suministra con varios temas incorporados, como Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent y alto contraste.
APIs amigables para desarrolladores
Disponemos de suficientes APIs del lado del cliente para optimizar el proceso de edición de contenido.
Accesibilidad del editor HTML
Navegación por teclado
El componente Rich Text Editor de Blazor garantiza que cada celda sea accesible mediante el teclado. Las principales características como ordenar, seleccionar y editar se pueden realizar utilizando solo 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 Blazor 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 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 Rich Text Editor de Blazor admite la representació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.
Otros frameworks compatibles
El Rich Text Editor está disponible para los frameworks React, Angular, JavaScript y Vue. Explora sus opciones específicas para cada plataforma a través de los siguientes enlaces:
Navegadores compatibles
El Rich Text Editor de Blazor funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
¿No sabes crear tu primer Blazor Rich Text Editor? Nuestra guía ayuda.
Inicia el Rich Text Editor Blazor servidor Empieza Blazor WebAssembly Rich Text Editor Inicia Blazor WebAssembly Rich Text EditorComponentes de Blazor: más de 145 componentes de interfaz de usuario y DataViz
TODOS LOS COMPONENTES
COMPONENTES INTELIGENTES
CUADRÍCULAS
VISUALIZACIÓN DE DATOS
ENTRADAS DE DATOS
MENÚS DESPLEGABLES
BOTONES
CHAT INTERACTIVO
NAVEGACIÓN
NOTIFICACIÓN
FORMULARIOS
Preguntas frecuentes
¿Por qué elegir el Rich Text Editor de Blazor de Syncfusion Essential Studio®?
El Rich Text Editor de Blazor de Syncfusion es un editor HTML WYSIWYG rico en funciones que ofrece las siguientes características:
Ofrece la mejor experiencia de edición WYSIWYG con editores HTML y Markdown.
- Flexible para integrar bibliotecas de terceros.
Editor en modo en línea para mostrar los comandos bajo demanda.
- Uno de los mejores Editores de texto enriquecido de Blazor en el 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.
- Adaptado para el tacto en dispositivos móviles y responsivo.
Amplias demostraciones, documentación y videos para aprender rápidamente y empezar a usar el Rich Text Editor de Blazor.
¿Cuál es el precio del Rich Text Editor de Blazor de Syncfusion?
No vendemos el Rich Text Editor de Blazor por separado. Solo está disponible para su compra como parte de la licencia de equipo de Syncfusion. Esta incluye más de 1,600 componentes y frameworks, incluido el Rich Text Editor de Blazor. 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, podemos ofrecer descuentos basados en promociones activas actualmente. Póngase en contacto con nuestros especialistas en productos hoy mismo para ver si puede optar a algún descuento adicional.
¿Dónde puedo encontrar la demostración del Rich Text Editor de Blazor de Syncfusion?
Puedes encontrar nuestra demostración del Rich Text Editor de Blazor, que muestra cómo renderizar y configurar el Rich Text Editor.
¿Puedo comprar el componente Rich Text Editor de Blazor de Syncfusion por separado?
No, nuestros más de 1,600 componentes y frameworks para web, móvil y escritorio, incluido nuestro Rich Text Editor de Blazor, no se venden individualmente. Solo están disponibles como parte de una licencia por equipo. Sin embargo, hemos puesto un precio competitivo al producto, por lo que solo cuesta un poco más de lo que otros proveedores cobran por su componente de Rich Text Editor individual. También hemos descubierto que, según nuestra experiencia, nuestros clientes suelen empezar utilizando uno de nuestros productos y luego se expanden rápidamente a varios, 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 basados en promociones actualmente activas. Ponte en contacto con nuestros especialistas de producto hoy mismo para ver si cumples los requisitos para obtener descuentos adicionales.
¿Puedo descargar y usar el Rich Text Editor de Blazor 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 personas cuyas organizaciones tengan menos de 1 millón de USD en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo a usar el Rich Text Editor de Blazor de Syncfusion?
Un buen lugar para empezar sería nuestra completa documentación de inicio rápido.
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 Rich Text Editor de Blazor 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 tutoriales y blogs del Rich Text Editor de Blazor
Los vídeos tutoriales y las publicaciones del blog del Rich Text Editor de Blazor te guiarán en la creación de tu primera aplicación con estos componentes de Blazor. 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. Explora nuestras últimas publicaciones en nuestro blog y canales de vídeos tutoriales para obtener actualizaciones del Rich Text Editor de Blazor.
VÍDEOS
Cómo importar y exportar un archivo RTF en el componente Rich Text Editor de Blazor
9 DE FEBRERO DE 2024
VÍDEOS
Cómo exportar contenido del Rich Text Editor de Blazor a un archivo PDF
14 DE FEBRERO DE 2024
