在UmiJS项目中正确使用Tiptap富文本编辑器

Tiptap是一个基于ProseMirror的现代化富文本编辑器框架，提供了React、Vue等前端框架的封装。本文将详细介绍如何在UmiJS项目中正确集成Tiptap编辑器，并解决常见的配置问题。

常见错误分析

许多开发者在UmiJS项目中初次使用Tiptap时，会遇到"Schema is missing its top node type ('doc')"的错误。这个错误的核心原因是编辑器实例没有正确配置必要的扩展(extensions)。

解决方案

要解决这个问题，必须为编辑器提供至少一个文档节点类型和基本扩展。以下是完整的配置示例：

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

const MarkdownEditor = () => {
    const editor = useEditor({
        extensions: [
            StarterKit,
        ],
        content: '<p>Hello World!</p>',
    })
    
    return (
        <EditorContent editor={editor} />
    )
}

关键配置说明

1. StarterKit扩展：这是Tiptap提供的一个基础扩展包，包含了文档节点、段落、标题等基本功能
2. content属性：设置编辑器的初始内容，可以是HTML字符串或JSON格式
3. extensions数组：必须至少包含一个文档节点类型的扩展

进阶配置建议

在实际项目中，你可能需要添加更多功能：

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline'
import Link from '@tiptap/extension-link'

const RichTextEditor = () => {
    const editor = useEditor({
        extensions: [
            StarterKit,
            Underline,
            Link.configure({
                openOnClick: false,
            }),
        ],
        content: '<p>开始编辑你的内容...</p>',
    })
    
    return <EditorContent editor={editor} />
}

注意事项

1. 确保已安装所有必要的依赖包，包括@tiptap/react和@tiptap/starter-kit
2. 在UmiJS项目中，可能需要检查构建配置以确保ProseMirror相关代码能正确打包
3. 对于复杂的编辑器需求，可以考虑自定义节点和扩展

通过以上配置，你就可以在UmiJS项目中顺利使用Tiptap富文本编辑器了。根据项目需求，你可以进一步探索Tiptap提供的各种扩展和自定义功能。