Froala Inline Text Editor

Un plugin comercial listo para producción que sustituye el editor de texto enriquecido predeterminado GrapesJS por la experiencia completa de Froala WYSIWYG — edición en línea, formato avanzado, herramientas de imagen y enlaces, tokens de personalización e integración fluida con GrapesJS Studio. TypeScript estricto en todo el proceso, soporte para Froala de doble versión (4.x y 5.x), y limpieza de ciclo de vida probada que sobrevive a ciclos rápidos de activación/desactivación sin filtrar DOM.

Para quién es

Equipos enviando landing pages, plantillas de correo, flujos de incorporación SaaS y editores visuales que han superado el GrapesJS RTE estándar y no quieren pasar una semana cableando Froala ellos mismos. Si ya has licenciado Froala (o planeas hacerlo) y usas GrapesJS o GrapesJS Studio en producción, este plugin elimina alrededor de mil líneas de pegamento de integración — y los ocho o nueve errores sutiles que de otro modo descubrirías por las malas.

Lo que obtienes

Edición en línea y por bloques, configurada por etiqueta.Edición a nivel de bloques para párrafos y divs con la barra de herramientas completa de Froala. Modo en línea ligero para<span>,<a><button> y elementos de encabezado con una barra de herramientas simplificada. Elige qué etiquetas obtienen comportamiento en línea mediante una únicainlineopción de configuración — sin hacer parches de mono.

Soporte para Native GrapesJS Studio.Oficialmente compatible.@grapesjs/studio-sdk La hoja de estilo de Froala se inyecta automáticamente en el iframe de lienzo mediante lainjectCanvasStylesopción, por lo que el editor renderiza correctamente dentro de Studio sin necesidad de cableado manual de la hoja de estilo. Se incluye con una demo de Studio que se puede ejecutar.

Soporte para versiones duales de Froala — 4.x y 5.x.Detección de versiones en tiempo de ejecución mediante un único adaptador de compatibilidad. Actualiza o degrada Froala sin tocar el código del plugin. El rango de pares está bloqueado en>=4.0.14 <6para que controles la versión de editor a tu ritmo.

Fichas de personalización sacadas de la caja.Un comando Froala ya hechopersonalization_ddinserta tokens de fusión seleccionados en un desplegable como{{Name}},{{Email}} o cualquier conjunto de tokens que configures. Entra directamente en los creadores de plantillas de correo electrónico y herramientas de marketing — no necesitas código de comandos personalizado.

Ciclo de vida seguro para la memoria.Todos los recursos de larga duración se rastrean y se publican en desactivación: s rebotadoMutationObserverpara contenido y barra de herramientas (50 ms), el listener iframemousedownde canvas, s pendientesetTimeouty — lo más importante es — cualquier nodo huérfano.fr-toolbarque Froala v5 ocasionalmente deje varado durante las carreras de destrucción. Verificado que no hay fugas en veinte ciclos rápidos de activación/desactivación en la suite e2e.

Posicionamiento inteligente de la barra de herramientas.Las actualizaciones de posición de la barra de herramientas responden a eventos de GrapesJSrteToolbarPosUpdate, redimensionan el viewport y se desplazan. Los bordes, el radio y el espaciado son totalmente configurables. La restauración de Caret utiliza una cadena de respaldo segura (caretRangeFromPoint→caretPositionFromPoint), por lo que la colocación del cursor sobrevive a los casos límite de WebKit/Chromium que rompen integraciones ingenuas.

TypeScript de primera clase.Todo el plugin está escrito en modo estricto TypeScript. Las declaraciones de tipo (.d.ts) y los mapas de declaraciones vienen en el paquete: tu editor salta directamente de unafroala(editor, options)llamada a un objeto de opciones completamente tipado. Cero implícitoany.

Distribución multiformato.

• ESM (.mjs) para empaquetadores modernos
• CommonJS (.cjs) para Node y herramientas heredadas
• UMD (.min.js) para<script>la instalación de etiquetas
• Mapas fuente para los tres

El paquete minificado tiene aproximadamente 50 KB (Froala en sí sigue siendo una dependencia entre iguales que se lleva por separado).

Especificaciones técnicas

Qué hay de nuevo

• 1.2.0 — Integración de GrapesJS Studio.Auto-inyecta estilos de Froala en el iframe de lienzo de Studio. La demo del estudio y la cobertura de Playwright e2e se enviaron junto con ella.
• 1.1.1 — Solución de fugas en la barra de herramientas.El barrido defensivo elimina nodos huérfanos.fr-toolbardurante la destrucción de razas de Froala v5 bajo ciclos rápidos de habilitación/desactivación.
• 1.1.0 — Migración de TypeScript.El código fuente completo pasó a TypeScript estricto; declaraciones emitidas desde la fuente; Licencia comercial adoptada.
• 1.0.0 — Lanzamiento en el Marketplace.Arquitectura modular (ocho módulos enfocados en lugar de un archivo de 380 líneas), soporte para versiones dobles de Froala, cobertura completa de pruebas, pipeline CI/CD.