SuperAPI AI 工具集

rails-tiptap-autosave

通用与其它

查看项目

更新于 10-16 00:04

技能介绍

用途:为任意 Rails 模型添加 Tiptap 富文本编辑与自动后台保存,内容以 Markdown 存入普通 text 列,不使用 ActionText。适用于不想引入 ActionText、需要内联自动保存、用 Stimulus 集成 Tiptap、构建带格式工具栏的编辑界面,或排查 Tiptap 与 Turbo 缓存冲突的场景。

主要能力:Tiptap 编辑器经 Stimulus 初始化,将输入转为 Markdown;每次按键防抖 1 秒后 PATCH 到 autosave 端点;控制器用 update_column 保存;状态指示显示“Saving...”到“Saved”后淡出。核心文件包括 app/javascript/controllers/rich_text_editor_controller.js、app/views/shared/_rich_text_field.html.erb 与 _bubble_menu.html.erb。可选审计追踪将快速编辑合并为单个事件。

使用方式:迁移中加 text 列(必须 :text,非 :string);路由加 member { patch :autosave };控制器定义白名单字段并用 update_column 保存,set_article 的 only 列表需含 :autosave;视图渲染 shared/rich_text_field 并传 url、field、content、placeholder、label。多个字段各自独立实例。渲染已存 Markdown 可用 redcarpet 与 MarkdownHelper。

限制与注意:Tiptap 不兼容 importmap,需用 esbuild 或 vite;不要加 has_rich_text;不要在含 Tiptap 的模型上用 broadcasts_refreshes,需按用户排除广播;BubbleMenu 元素会被移出 Stimulus 作用域,需在 new Editor() 前保存引用;需处理 turbo:before-cache 销毁编辑器,避免返回时编辑器损坏。安装细节、控制器完整代码、局部模板与审计追踪见对应 references 文件。