创建一个新的扩展

您知道吗？您可以从零开始构建自己的扩展！其语法与上述其他扩展或现有扩展是相同的。

创建一个扩展

扩展为 Tiptap 添加新的功能，您会经常看到“扩展”这个词，即使是用于节点和标记。但也存在字面意义上的扩展。这些不能像标记和节点那样添加到 schema 中，但可以添加功能或改变编辑器的行为。

一个很好的学习示例可能是 TextAlign。

import { Extension } from '@tiptap/core'

const CustomExtension = Extension.create({
  name: 'customExtension',

  // 您的代码写在这里。
})

您也可以使用回调函数来创建扩展。当您想封装扩展的逻辑时非常有用，例如定义事件处理器或其他自定义逻辑。

import { Extension } from '@tiptap/core'

const CustomExtension = Extension.create(() => {
  // 定义在扩展中使用的变量或函数
  const customVariable = 'foo'

  function onCreate() {}
  function onUpdate() {}

  return {
    name: 'customExtension',
    onCreate,
    onUpdate,

    // 您的代码写在这里。
  }
})

了解更多关于扩展 API。

创建一个节点

如果将文档视为一棵树，那么节点就是这棵树中的一种内容类型。好的学习示例包括 Paragraph、Heading 或 CodeBlock。

import { Node } from '@tiptap/core'

const CustomNode = Node.create({
  name: 'customNode',

  // 您的代码写在这里。
})

您也可以使用回调函数来创建节点。当您想封装扩展的逻辑时非常有用，例如定义事件处理器或其他自定义逻辑。

import { Node } from '@tiptap/core'

const CustomNode = Node.create(() => {
  // 定义在扩展中使用的变量或函数
  const customVariable = 'foo'

  function onCreate() {}
  function onUpdate() {}

  return {
    name: 'customNode',
    onCreate,
    onUpdate,

    // 您的代码写在这里。
  }
})

节点不必是块级的。它们也可以以内联方式渲染文本，例如用于 @mentions。

了解更多关于节点 API。

创建一个标记

一个或多个标记可以应用于节点，例如用于添加内联格式。好的学习示例包括 Bold、Italic 和 Highlight。

import { Mark } from '@tiptap/core'

const CustomMark = Mark.create({
  name: 'customMark',

  // 您的代码写在这里。
})

您也可以使用回调函数来创建标记。当您想封装扩展的逻辑时非常有用，例如定义事件处理器或其他自定义逻辑。

import { Mark } from '@tiptap/core'

const CustomMark = Mark.create(() => {
  // 定义在扩展中使用的变量或函数
  const customVariable = 'foo'

  function onCreate() {}
  function onUpdate() {}

  return {
    name: 'customMark',
    onCreate,
    onUpdate,

    // 您的代码写在这里。
  }
})

了解更多关于标记 API。

发布独立扩展

如果您想为 Tiptap 创建并发布您自己的扩展，可以使用我们的 CLI 工具来引导您的项目。只需运行 npm init tiptap-extension 并按照提示操作。CLI 会为您创建一个包含预配置项目的新文件夹，其中包含用于运行 Rollup 的构建脚本。

如果您想在本地测试您的扩展，可以在扩展项目文件夹中运行 npm link，然后在您的项目中（例如 Vite 应用）运行 npm link YOUR_EXTENSION。

创建一个扩展

创建一个节点

创建一个标记

发布独立扩展

分享