airtable 字段不渲染 html,仅 custom block 可通过 innerhtml 渲染;需 pro 版本,且禁用 script/iframe;替代方案是存 url 并用 open url 按钮跳转。

HTML 字段在 Airtable 里默认不渲染,只会显示为纯文本
Airtable 的 Long text 字段(哪怕勾选了“支持 Markdown”)也不会解析或执行 HTML 标签。你贴进去的 <h2>标题</h2>
<p>段落</p>,用户看到的就是一串带尖括号的字符,不是格式化后的内容。
这是因为 Airtable 故意禁用 HTML 渲染——防止 XSS、避免布局失控、也符合其低代码定位。想“让 HTML 显示出来”,本质是绕过这个限制,而不是打开某个开关。
唯一可行方案:用 Airtable Interface + 自定义块(Custom Block)嵌入 HTML
只有 Interface 中的 Custom Block 支持真实运行前端代码,能加载并渲染你传入的 HTML 字符串。其他所有字段类型、视图、仪表板、API 返回值,都不行。
- 必须使用 Airtable Pro 或更高版本(Interface 是付费功能)
- 需要在 Interface 编辑器中添加一个
Custom Block,然后写 JavaScript 把记录里的 HTML 字符串插入到div内,并用innerHTML赋值 - 不能直接把
<script></script>或<iframe></iframe>放进字段——Custom Block 沙箱会拦截,且 Airtable 服务端会过滤掉这些标签 - 样式受限:CSS 只能内联写在标签里(如
<span style="color:red">红字</span>),或通过<style></style>标签注入(但部分选择器可能被沙箱限制)
示例片段(Custom Block 的 onRecordChange 中):
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
const htmlContent = record.getCellValue("Detail_HTML") || "";
container.innerHTML = htmlContent;
别碰「富文本」字段和「Markdown」选项
Airtable 根本没有原生“富文本字段”。所谓“支持 Markdown”的 Long text 字段,只识别极简 Markdown(**bold**、*italic*、- list),对 HTML 零支持。哪怕你写 <strong>test</strong>,它也原样输出。
- 开启 Markdown 不等于开启 HTML;这是两个完全无关的开关
- 试图用 Markdown 语法模拟 HTML 结构(比如用多个
###当标题)会丢失语义、无法控制样式、也不兼容导出 - 第三方同步工具(如 Zapier、Make)往字段写 HTML 字符串,结果一样:存得进去,渲染不出来
如果只是想“看起来像网页”,换思路:用链接跳转代替内嵌
比折腾 Custom Block 更轻量、更稳定的做法是:把 HTML 内容生成静态页(比如用 GitHub Pages、Vercel、甚至本地 file://),然后在 Airtable 字段里存一个 URL。再用 Interface 的 Embed 块或 Open URL 按钮调用。
- 免去 XSS 审查、样式冲突、JS 执行失败等问题
- 内容可独立更新,Airtable 记录只需改一次链接
- 适合文档、说明页、产品详情等场景;不适合高频交互(比如表单、按钮点击)
- 注意:Airtable 的
Embed块只支持特定域名(如 YouTube、Figma、Notion),自建页面要用Open URL按钮或外部浏览器打开
真正卡住人的地方从来不是“怎么写 HTML”,而是没意识到 Airtable 的字段层和界面层是隔离的——你在记录里写的,和用户最终看到的,中间隔着一层明确的设计决策。绕不开,只能适配。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










