设置编辑器样式

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

想走捷径吗？

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

试用 demo 获取访问权限

样式化普通 HTML

整个编辑器渲染在一个类为 .tiptap 的容器内。你可以使用这个类来限制样式只应用于编辑器内容：

/* 限定于编辑器 */
.tiptap p {
  margin: 1em 0;
}

如果你在其他地方渲染存储的内容，则不会有 .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 Intellisense，请将以下代码片段添加到你的 .vscode/setting.json 中，以启用 Tiptap 对象中的智能提示支持：

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