自定义编辑器样式

Tiptap 是无头编辑器，这意味着它不提供任何样式。这也意味着你可以完全控制编辑器的外观。下面的方法允许你向编辑器应用自定义样式。

想快速入门吗？

使用我们的 UI 模板加速你在 React 应用中的 Tiptap 集成。它可以直接部署，也可以根据你的需求进行自定义。

试用演示

获取访问权限

使用普通 HTML 样式

整个编辑器是在一个带有类名 .tiptap 的容器中渲染的。你可以利用这一点，将样式应用到编辑器内容中：

/* 仅作用于编辑器 */
.tiptap p {
  margin: 1em 0;
}

使用 CSS 模块样式

在 CSS 模块中，类名会被修改以实现局部作用域，这可能导致针对 .tiptap 类的样式无法生效。请使用全局样式或 :global(.tiptap) 修饰符来确保样式正确应用。

如果你在其他地方渲染存储的内容，可能不会有 .tiptap 容器，因此你可以在全局为相关的 HTML 标签添加样式：

/* 全局样式 */
p {
  margin: 1em 0;
}

添加自定义类

你可以完全控制渲染过程，包括向所有元素添加类。

扩展

大多数扩展允许你通过 HTMLAttributes 选项向渲染的 HTML 元素添加属性。你可以利用这一点添加自定义类（或其他属性）。当你使用 Tailwind CSS 时，这非常有用。

new Editor({
  extensions: [
    Document,
    Paragraph.configure({
      HTMLAttributes: {
        class: 'my-custom-paragraph',
      },
    }),
    Heading.configure({
      HTMLAttributes: {
        class: 'my-custom-heading',
      },
    }),
    Text,
  ],
})

渲染出的 HTML 如下：

<h1 class="my-custom-heading">示例文本</h1>
<p class="my-custom-paragraph">哇，这真是自定义的。</p>

如果扩展已经定义了类名，你添加的类会被追加。

编辑器

你甚至可以给包含编辑器的元素传递类：

new Editor({
  editorProps: {
    attributes: {
      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
    },
  },
})

自定义 HTML

或者你可以自定义扩展的标记。以下示例将创建一个自定义粗体扩展，不渲染 <strong> 标签，而渲染 <b> 标签：

import Bold from '@tiptap/extension-bold'

const CustomBold = Bold.extend({
  renderHTML({ HTMLAttributes }) {
    // 原始：
    // return ['strong', HTMLAttributes, 0]
    return ['b', HTMLAttributes, 0]
  },
})

new Editor({
  extensions: [
    // …
    CustomBold,
  ],
})

你应该将自定义扩展放在单独的文件中，以便更好地组织，但你已经明白了。

使用 Tailwind CSS 样式

编辑器也兼容 Tailwind CSS。下面演示了一个使用 @tailwindcss/typography 插件样式的示例。

智能提示

如果你使用 TailwindCSS 智能提示，请将以下代码片段添加到你的 .vscode/setting.json 中，以启用对 Tiptap 对象内的智能提示支持：

"tailwindCSS.experimental.classRegex": [
  "class:\\s*?[\"'`]([^\"'`]*).*?,"
]