基于tiptap实现富文本编辑器 - 支持更多的元素设置tiptap私有仓库 tiptap有一些库是存在私有仓库中的，需

项目地址：tiptap-editor

效果展示：tiptap-editor-tuntun.netlify.app/

持续更新中

设置tiptap私有仓库

tiptap有一些库是存在私有仓库中的，需要注册tiptap的账号，获取仓库的访问权限。

首先打开网站cloud-tiptap，注册账号之后打开pro-extensions

可以看到自己的令牌和如何设置以访问pro-extensions

首先在项目根目录新建.npmrc文件。按照文档指示，添加配置。

@tiptap-pro:registry=https://registry.tiptap.dev/
//registry.tiptap.dev/:_authToken=your_authToken

当然也可以通过环境变量或者在构建时通过命令行进行配置。

公式

公式的支持，tiptap提供了官方的插件@tiptap-pro/extension-mathematics，底层使用katex进行公式的渲染

安装所需依赖

pnpm install @tiptap-pro/extension-mathematics katex

引入katex的css

import 'katex/dist/katex.min.css'

配置公式的插件，其中shouldRender标识了可以在哪里渲染公式，默认是不可以在code中渲染，这里可以自己配置，比如下文中自定义了不允许在代码块（不包括内联代码）中渲染和不在标题中渲染

Mathematics.configure({
  shouldRender: (state, pos, node) => {
    const $pos = state.doc.resolve(pos)
    return (
      node.type.name === 'text' &&
      $pos.parent.type.name !== 'codeBlock' &&
      $pos.parent.type.name !== 'heading'
    )
  },
}),

角标

下标使用插件@tiptap/extension-subscript，上标使用插件@tiptap/extension-superscript

pnpm install @tiptap/extension-subscript @tiptap/extension-superscript

表格

表格的支持需要安装4个包

@tiptap/extension-table
@tiptap/extension-table-cell
@tiptap/extension-table-header
@tiptap/extension-table-row

pnpm install @tiptap/extension-table @tiptap/extension-table-cell @tiptap/extension-table-header @tiptap/extension-table-row

添加table样式

.tiptap table {
  @apply border-collapse border border-gray-300;
}

.tiptap table th {
  @apply align-top relative border min-w-4 px-2 py-1 border-gray-300 bg-gray-100 font-bold;
}

.tiptap table th * {
  @apply m-0;
}

.tiptap table td {
  @apply align-top relative border min-w-4 px-2 py-1 border-gray-300;
}

.tiptap table td * {
  @apply m-0;
}

.tiptap table .selectedCell:after {
  @apply bg-gray-100 absolute left-0 right-0 top-0 bottom-0 pointer-events-none z-[-1];
  content: "";
}

.tiptap table .column-resize-handle {
  @apply bg-purple-500 bottom-[-2px] pointer-events-none absolute right-[-2px] top-0 w-[4px] z-[2];
}

.tiptap.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

文字样式

文字样式分为字体颜色和字体，都是使用span标签包裹文字后添加style实现的，文字颜色的插件是@tiptap/extension-color，字体的插件是@tiptap/extension-font-family；而这两个插件都是基于@tiptap/extension-text-style插件

安装插件依赖

pnpm install @tiptap/extension-text-style @tiptap/extension-color @tiptap/extension-font-family

之后使用插件

import TextStyle from '@tiptap/extension-text-style'
import FontFamily from '@tiptap/extension-font-family'
import { Color } from '@tiptap/extension-color'

const editor = useEditor({
  extensions: [
    // ...
    TextStyle,
    FontFamily,
    Color,
  ]
})