GrapesJS RTE

GrapesJS RTE — 常见问题

GrapesJS 中的 RTE 是什么？

RTE 是用户双击文本组件时激活的行内富文本编辑器。它直接在画布内编辑，而不是在独立输入框中，并自带一个最小工具栏——加粗、斜体、下划线、删除线和链接。此外的一切都来自插件或你自定义的工具栏动作。

如何向 GrapesJS 的 RTE 工具栏添加按钮？

使用 editor.RichTextEditor.add，传入 id、图标以及一个把格式应用到当前选区的 result 函数。字体选择器、色板与对齐控件正是这样实现的。请把动作限定在「为选区设置格式」上——任何涉及结构的操作应交由组件或命令处理。

可以用 TipTap、Quill 或 CKEditor 替换 GrapesJS 的 RTE 吗？

可以。GrapesJS 允许通过 rte 配置替换整个 RTE 实现，本分类中提供 TipTap、Quill、CKEditor 与 ProseMirror 的封装。封装层必须在失焦时把编辑后的内容写回组件——这正是这些插件替你处理好的部分。

为什么 RTE 会删改我的 HTML？

因为 contenteditable 会对标记做规范化处理，随后 GrapesJS 再把结果解析回自己的组件模型。在这一来一回中，不受支持的标签和多余属性会被丢弃。如果你需要标记被原样保留，就不要放进文本组件——改用带自定义 view 的自定义组件类型。

哪个 RTE 插件适配我的 GrapesJS 版本？

查看每个条目上的兼容性标识，并使用本页的版本筛选。RTE 是 GrapesJS 大版本之间 API 变动最大的部分，因此较旧的插件在当前版本上运行可能需要兼容层。付费条目会明确写出已测试版本，并显示作者的支持响应时长。