大多数功能都打包到节点、标记和扩展中。导入所需内容并将它们作为数组传递给编辑器,就可以开始了。以下是只有三个扩展名的最小设置:
import{Editor}from'@tiptap/core'importDocumentfrom'@tiptap/extension-document'importParagraphfrom'@tiptap/extension-paragraph'importTextfrom'@tiptap/extension-text'newEditor({element:document.querySelector('.element'),extensions:[Document,Paragraph,Text,],})扩展配置大多数扩展都可以配置。添加一个configure方法将对象传递给它。以下示例将禁用默认的标题级别4、5和6:
import{Editor}from'@tiptap/core'importDocumentfrom'@tiptap/extension-document'importParagraphfrom'@tiptap/extension-paragraph'importTextfrom'@tiptap/extension-text'importHeadingfrom'@tiptap/extension-heading'newEditor({element:document.querySelector('.element'),extensions:[Document,Paragraph,Text,Heading.configure({levels:[1,2,3],}),],})默认扩展我们已经组合了一些最常见的扩展,并提供了一个StarterKit扩展来加载它们。下面是如何使用它:
importStarterKitfrom'@tiptap/starter-kit'newEditor({extensions:[StarterKit,],})甚至可以将所有默认扩展的配置作为对象传递。只需在配置前面加上扩展名:
importStarterKitfrom'@tiptap/starter-kit'newEditor({extensions:StarterKit.configure({heading:{levels:[1,2,3],},}),})StarterKit扩展包含扩展列表。如果要加载它们并添加一些自定义扩展,可以这样编写:
importStarterKitfrom'@tiptap/starter-kit'importStrikefrom'@tiptap/extension-strike'newEditor({extensions:[StarterKit,Strike,],})过滤特定扩展
importStarterKitfrom'@tiptap/starter-kit'newEditor({extensions:[StarterKit.configure({history:false,}),],})您可能会在协作编辑示例中看到类似的内容。协作有自己的历史扩展,您需要删除默认的历史扩展以避免冲突。
编辑器提供了一个流畅的API来触发命令和添加活动状态。你可以使用任何你喜欢的标记。为了使行菜单的定位更容易,我们提供了一些实用程序和组件。让我们逐一介绍最典型的用例。