编写自定义扩展
Umo Editor Mobile 基于 Tiptap 构建,因此自定义扩展的核心方式与 Tiptap 保持一致。
您可以使用 JavaScript 编写扩展,也可以为节点扩展编写 Vue 版 NodeView。
推荐阅读
- Tiptap 官方扩展指南:Custom Extensions
- Tiptap NodeView(Vue):Vue Node Views
- Tiptap NodeView(JavaScript):JavaScript Node Views
注册自定义扩展
假设您已经实现了一个自定义扩展 MyCustomExtension,可以通过 extensions 配置追加:
const options = {
extensions: [MyCustomExtension],
}如果您希望关闭某个内置扩展,再替换为自己的实现,可以配合 disableExtensions 使用:
const options = {
disableExtensions: ['mention'],
extensions: [MyMentionExtension],
}移动端开发建议
- 优先复用 Tiptap 原生扩展能力,减少与移动端既有交互体系的冲突。
- 如果扩展需要自定义节点视图,优先评估其在触控场景中的点击、滚动、焦点与软键盘行为。
- 如果扩展需要暴露业务操作入口,优先考虑是否可通过插槽或现有工具栏入口接入,而不是直接照搬桌面端交互。 移动端不同
- 如果扩展会影响保存、预览或内容结构,请同时验证
getHTML()、getJSON()与只读态渲染效果。
与桌面端的主要差异
- 扩展编写方式基本一致,但 UI 承载方式不同。 移动端不同
- 移动端不对外开放组件体系,因此不建议依赖文档站中的公共组件封装来承载扩展 UI。 不支持
- 扩展最终是否“可用”,除了数据层实现外,还取决于其是否适合移动端交互。 移动端特有