Tiptap中文API文档(Editor)

tiptap是prosemiror的友好包装。尽管tiptap试图隐藏ProseMirror的大部分复杂性，但它是在其api之上构建的，我们建议您通读ProseMirror指南以了解高级用法。

结构

ProseMirror使用严格的模式，该模式定义了严谨的文档结构。文档是由标题、段落和其他元素组成的树，称为节点。标记可以附加到节点。一般改变文档段落使用Commands的方式。

内容

文档以一种状态存储。所有更改都作为事务应用于状态。状态包含有关当前内容、光标位置和选择的详细信息。您可以使用不同的事件钩子，例如在应用事务之前更改事务。

扩展

扩展将节点、标记和/或功能添加到编辑器。许多扩展将命令绑定到常用键盘快捷键。

词汇

单词	描述
Schema	配置您的内容的数据结构
Document	编辑器中的实际内容
State	描述当前内容和编辑器选择的所有内容。
Transaction	状态更改（更新、选择等）
Extension	注册新功能
Node	一种内容类型，如标题、段落
Mark	一种节点标记，可以应用于节点，例如内联格式。
Command	在编辑器中执行一个动作，以某种方式改变状态
Decoration	在文档顶部设置样式，例如突出显示错误。

方法

编辑器实例将提供一组公共方法。他们会帮你和编辑一起工作。

不要把方法和命令混为一谈。命令用于更改编辑器的状态（内容、选择等），并且只返回true或false。方法是正则函数，可以返回任何内容。

方法	参数	描述
can	-	检查是否可以执行命令或命令链。不执行它。
chain	-	创建一个命令链来同时调用多个命令。
destroy	-	停止编辑器实例并解除所有事件的绑定。
getHTML	-	返回当前内容html字符串
getJSON	-	返回当前内容的json对象
getAttributes	name: node或者mark的名称	获取当前选定节点的属性或标记
isActive	name: node或者mark的名称,attrs: node或mark的属性	返回当前选定的节点或标记是否处于活动状态。
isEditable	-	返回编辑器是否可编辑
isEmpty	-	检查是否没有内容。
getCharacterCount	-	获取当前文档的字符数。
registerPlugin	plugin: ProseMirror插件handlePlugins控制如何将插件合并到现有插件中。	注册ProseMirror插件
setOptions	options: 选项列表	更新编辑器的配置选项
unregisterPlugin	name: 插件name	注销ProseMirror插件

配置项

绑定元素

指定编辑器将绑定的HTML元素。以下代码将tiptap与.element类的元素集成：

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    StarterKit,
  ],
})

甚至可以在将编辑器装载到元素之前启动它。当您的DOM还不可用时，这很有用。只需去掉元素，我们就为您创建一个。以后再像那样把它加到你的容器里:

yourContainerElement.append(editor.options.element)

扩展

它需要向extensions属性传递一个扩展列表，即使您只想允许段落

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Highlight from '@tiptap/extension-highlight'

new Editor({
  // Use the default extensions
  extensions: [
    StarterKit,
  ],

  // … or use specific extensions
  extensions: [
    Document,
    Paragraph,
    Text,
  ],

  // … or both
  extensions: [
    StarterKit,
    Highlight,
  ],
})

内容

使用content属性可以为编辑器提供初始内容。可以是HTML或JSON。

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  content: `<p>Example Text</p>`,
  extensions: [
    StarterKit,
  ],
})

可编辑

editable属性配置用户是否可输入编辑器

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  content: `<p>Example Text</p>`,
  extensions: [
    StarterKit,
  ],
  editable: false,
})

自动聚焦

使用autofocus属性，可以在初始化时强制光标跳转到编辑器中。

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit,
  ],
  autofocus: false,
})

值	描述
'start'	将焦点设置为文档的开头
'end'	将焦点设置为文档结尾
Number	将焦点设置到文档中的特定位置
true	自动聚焦
false	不自动聚焦
null	禁用自动对焦

启用输入规则

默认情况下，tiptap启用所有输入规则。使用enableInputRules，您可以禁用它

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  content: `<p>Example Text</p>`,
  extensions: [
    StarterKit,
  ],
  enableInputRules: false,
})

启用黏贴规则

默认情况下，tiptap启用所有粘贴规则。通过enablePasteRules，您可以禁用它

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  content: `<p>Example Text</p>`,
  extensions: [
    StarterKit,
  ],
  enablePasteRules: false,
})

注入CSS

默认情况下，tiptap会注入一点CSS。用css你可以禁用它

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit,
  ],
  injectCSS: false,
})

编辑器props

对于高级用例，您可以传递editorProps，它将由ProseMirror处理。下面是一个示例，说明如何将一些Tailwind类传递给编辑器容器，但您可以做的还有很多。

new Editor({
  // Learn more: https://prosemirror.net/docs/ref/#view.EditorProps
  editorProps: {
    attributes: {
      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
    },
  },
})

解析选项

传递的内容由ProseMirror解析。要配置这些解析，可以传递parseOptions，然后由ProseMirror处理。

new Editor({
  // Learn more: https://prosemirror.net/docs/ref/#model.ParseOptions
  parseOptions: {
    preserveWhitespace: 'full',
  },
})