Froala 内联文本编辑器

一款面向生产环境的商业插件，用完整的 Froala 所见即所得体验取代默认的 GrapesJS 富文本编辑器——支持内联编辑、高级格式化、图片和链接工具、个性化标记以及无缝的 GrapesJS Studio 集成。全套采用严格的TypeScript，支持双版本Froala（4.x和5.x），并具备经过实战考验的生命周期清理，能在快速启用/禁用周期中保持不泄漏DOM数据。

是给谁的

Teams 发布着陆页、邮件模板、SaaS 入职流程，以及已经超出原厂 GrapesJS RTE 的视觉编辑器，他们不想花一周时间自己布线 Froala。如果你已经授权了Froala（或计划授权），并且在生产中使用GrapesJS或GrapesJS Studio，这个插件可以去除大约一千行集成胶水——以及你本来可能通过艰难方法发现的八九个细微错误。

你能得到什么

内联和块编辑，按标签配置。使用完整的 Froala 工具栏，支持段落和 div 的块级编辑。轻量级的内联模式用于、<span><a><button>和航向元素，工具栏简化。通过一个inline配置选项选择标签的内联行为——无需进行猴子补丁。

原生 GrapesJS Studio 支持。官方兼容。@grapesjs/studio-sdkFroala的样式表通过选项自动注入到画布的iframeinjectCanvasStyles中，因此编辑器在Studio内能正确渲染，无需手动布线样式表。附带可运行的Studio演示版。

支持双版本 — 4.x 和 5.x。通过单一兼容适配器进行运行时版本检测。升级或降级 Froala 时不动插件代码。点对应范围是锁定>=4.0.14 <6的，所以你可以按自己的时间安排控制编辑版本。

个性化代币开箱即用。一个现成personalization_dd的 Froala 命令可以插入下拉选中的合并标记，比如{{Name}} ，{{Email}}或者你配置的任何标记集。直接进入邮件模板构建器和营销工具——无需自定义命令代码。

内存安全的生命周期。所有长寿命资源都被追踪并以禁用状态发布：去MutationObserver掉的s用于内容和工具栏（50毫秒）、画布iframemousedown监听器、待处理setTimeout的s，以及——关键是——Froala v5偶尔在破坏赛中搁浅的任何孤儿.fr-toolbar节点。在端对端套件中，确认在20次快速启用/禁用循环中零泄漏。

智能工具栏定位。工具栏位置更新响应 GrapesJSrteToolbarPosUpdate事件、视口大小调整和滚动。边界、半径和间距都可以完全自定义。Caret 恢复使用安全的备回链（caretRangeFromPoint→caretPositionFromPoint），因此光标位置能在 WebKit/Chromium 边缘情况中存活，这些情况会破坏幼稚的集成。

一流的TypeScript。整个插件采用严格模式 TypeScript 编写。类型声明（）.d.ts和声明映射都包含在捆绑包中——你的编辑器会直接froala(editor, options)从调用跳转到一个完全类型化的选项对象。完全没有隐含。any

多格式发行。

• 现代捆绑器的ESM（.mjs）也
• CommonJS （.cjs） 用于节点和遗留工具
• 用于标签安装的UMD（.min.js）<script>
• 三者的来源地图

压缩包大约是50 KB（Froala本身仍是一个需要单独携带的对等依赖）。

技术参数

有什么新动态

• 1.2.0 — GrapesJS Studio 集成。自动将Froala样式注入Studio Canvas的iframe。现场演示和Playwright端对端报道随同发货。
• 1.1.1 — 工具栏泄漏修复。防御扫荡在Froala v5摧毁种族时，能消除孤儿.fr-toolbar节点，快速启用/禁用循环。
• 1.1.0 — TypeScript 迁移。完整源代码迁移至严格TypeScript;源自声明;商业许可已通过。
• 1.0.0 — 市场发布。模块化架构（八个聚焦模块，而非一个380行文件），支持双Froala版本，全面测试覆盖，CI/CD流水线。