你是否发现在 AI 时代，我们对输入形式的需求，已经不再只局限于简单的文字？ 而是逐渐演变为多模态输入，我将以豆包为例，为大家深入解读。
如今，用户的输入不再只有文字，还包括了：
- 结构语义
- 上下文
- 行为意图
具体形式涵盖图像、文本、语音、段落引用等。在这样的业务场景下，传统的文本输入组件，例如 input 和 textarea，已经无法满足 AI 项目开发的日常需求。
textarea 更像是“表单时代”的产物，而 AI ChatBot 属于“内容编辑时代”的产品。
因此，我们需要一个能力更强的文本输入组件，而在业内，已经逐渐形成了一个共识性的选择：富文本编辑器。
为什么是富文本，而不是“加点 Hack 的 textarea”
1. 富文本天然的结构化特征
富文本编辑器的本质流程是：
用户输入 → 文档结构（JSON / AST） → Prompt 生成
而不是：
用户输入 → 一坨字符串
这一点在前端 AI 的业务场景中尤为关键。 因为大模型是自然语言领域的产物，其输入本质是 Prompt，而一份结构明确的 Prompt，往往能获得更精准的模型回复。
当用户输入中包含以下内容时：
- 普通文本
- @知识库
- @模型角色
- 引用段落
富文本编辑器可以在输入阶段就完成语义分层。 我们可以在富文本编辑器的输出结果中，分别抽离出对应的数据，进行状态管理和数据处理，最终再传递到服务端进行大模型调用。
如果此时仍然使用传统的 TextArea 组件来实现，就需要自行定义一套复杂的映射规则，对不同组成部分进行标识与解析，本质上相当于重复造了富文本的轮子。
2. 更便捷的操作流程与用户体验
在开发 ChatBot 或 Agent 产品时，除了基础的聊天能力之外，往往还会伴随更深入的用户需求，例如：
- 上传文件
- 联网搜索
- 深度思考
- 模式切换
- 快捷方式唤起
这些能力如果只依赖 input 或 textarea，几乎无法做到体验上的“自然”和“优雅”。
而富文本编辑器在这里再次体现出了优势 —— 它内部支持高度可定制的自定义组件。
多模态与参数联动场景
当我们进行多模态模型的图像生成、图像编辑等能力开发时，通常会涉及：
- 图像尺寸选择
- 图像风格选择
通过在富文本中自定义 Select 组件，我们可以轻松实现输入内容与外部参数的联动，大幅提升用户体验。
多 Agent / 多能力入口场景
如果产品需要融合多个 Agent 能力，一个清晰的能力标识就显得尤为重要。 此时，在输入框首部定制个性化的展示组件，可以很好地满足这一需求。
同时，借助富文本的灵活性，我们可以支持键盘、鼠标两种方式操作体验更加友好。
快捷输入与语义约定
此外，我们还可以：
- 自定义 input 组件，约定 Prompt 占位符
- 自定义
@、/等业界通用快捷方式 - 实现引用文件、唤起操作命令等能力
- 基于输入内容自动转换为特定组件
这些能力，都是传统文本输入框难以优雅实现的。
富文本与 textarea 能力对比
| 能力 | textarea | 富文本编辑器 |
|---|---|---|
| 图片 / 文件 | ❌ | ✅ |
| 结构化节点 | ❌ | ✅ |
| Prompt 模板 | ❌ | ✅ |
| 输入预处理 | ❌ | ✅ |
当然，软件开发没有银弹
当然，富文本编辑器也并非适用于所有场景，因为合适的技术选型是一个架构师放在首位的，在以下情况下需要慎重考虑：
- 极简问答工具
- 临时命令行式 AI
- 部分性能极端敏感场景（比如移动端）
框架的选择建议
既然富文本能力如此强大，应该如何选型呢，这里橙子推荐几个成熟方案：
- TipTap：同时支持 React 和 Vue
- Slate：能力强大，灵魂可定制性高
- Lexical：Facebook 出品，性能好，
橙子已在实际项目中验证，这些方案都可以实现的 AI Input 组件的基本能力。
有没有更开箱即用的方案？
此时一定会有兄弟想问： 富文本编辑器的实现复杂度较高，是否存在集成度更高、开箱即用的组件？
兄弟，有的。
Semi Design 的 AIChatInput 组件，基于 TipTap 进行了进一步封装，在一定范围内已经可以满足日常 AI 项目的使用需求。
写在最后
AI 大模型的竞争，正在逐渐从基础模型能力，扩展到产品形态与 Prompt 构建能力。因此，放弃 textarea，并不是为了“更复杂”，而是为了让 AI 真正理解用户在说什么。
