Tiptap 中的无效架构处理
内容完整性在协作编辑环境中可能是一个重大挑战。想象一下这样一个场景:拥有不同版本应用的用户试图编辑同一份文档。或者另一种常见场景:单页面应用中,一些用户长时间保持浏览器标签打开而不刷新,而另一些用户在最近一次页面加载后总是使用最新版本的编辑器。
在这两种情况下,版本较新的用户可能会创造包含新功能的内容,而这些功能对旧版用户而言并不可用。当旧版本用户尝试访问此类文档时,我们如何防止数据丢失、保持文档结构完整,以及确保用户体验顺畅?
这时,无效架构处理变得尤为重要。它让开发者可以优雅地管理内容结构与编辑器预期不符的场景,防止出现数据损坏、意外内容被剥除或编辑器崩溃等问题。
无论你是在构建笔记应用、内容管理系统,还是任何具有丰富文本编辑功能的应用,理解并正确实现架构处理都能显著提升你应用的稳定性和用户体验。
引入内容校验
Tiptap 提供了一个名为 enableContentCheck 的选项。当将其设为 true 时,会激活一套机制,用于根据已注册扩展的架构验证内容。这对于在内容出现错误时提前检测并处理尤为有用,可以避免错误带来的不良影响。
启用内容校验
要启用此功能,只需在初始化 Tiptap 编辑器时添加 enableContentCheck 选项:
new Editor({
enableContentCheck: true,
// ... 其他选项
})contentError 事件
当启用内容校验后,如果在初始化时提供的内容与架构不兼容,Tiptap 会触发一个 contentError 事件。这个事件提供有价值的信息,方便你正确处理相关错误。
处理 contentError 事件
你可以通过两种方式处理这些事件:
一种是使用 onContentError 回调:
new Editor({
enableContentCheck: true,
content: 可能包含错误的内容,
onContentError({ editor, error, disableCollaboration }) {
// 你的错误处理逻辑
},
// ... 其他选项
})另一种是监听 contentError 事件:
const editor = new Editor({
enableContentCheck: true,
content: 有问题的内容,
// ... 其他选项
})
editor.on('contentError', ({ editor, error, disableCollaboration }) => {
// 你的错误处理逻辑
})在不启用内容校验时监听 contentError 事件
如果你想在不启用内容校验的情况下监听 contentError 事件,可以在初始化 Tiptap 编辑器时将 emitContentError 设置为 true:
new Editor({
enableContentCheck: false,
emitContentError: true,
// ... 其他选项
})此设置允许运行带有无效内容的编辑器,但依然会在内容无效时通知你。
关于内容类型的说明
需要注意的是,Tiptap 在处理 JSON 内容类型时,内容校验的准确率达 100%。但在处理 HTML 内容时,可能存在一些局限。虽然 Tiptap 会尽最大努力提示缺失的节点,但某些与标记相关的问题可能在某些情况下未被检测到。
推荐的错误处理策略
你应如何应对架构错误,取决于你的具体应用和需求。以下提供一些常用的建议:
非协作编辑
如果你没有使用协作编辑功能,默认证的未知内容剥除行为可能已足够。这会确保内容保持在一个已知的有效状态,便于未来编辑。
协作编辑
如果使用协作功能,处理内容错误尤为重要,以防同步出现问题。以下是在协作环境中处理内容错误的示例方案:
onContentError({ editor, error, disableCollaboration }) {
// 禁用协作,避免同步无效内容
disableCollaboration()
// 阻止传发更新
const emitUpdate = false
// 禁用编辑器以阻止进一步操作
editor.setEditable(false, emitUpdate)
// 通知用户发生了错误
notifyUser("发生了错误。请刷新应用程序。")
}此方法执行了以下操作:
- 禁用协作以避免同步无效内容
- 阻止任何内容更新的传输
- 禁止编辑器的进一步输入
- 向用户发出提示,告知问题所在