tiptap 样式

引言

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

方法 1：为纯 HTML 添加样式

整个编辑器都在一个带有类 .tiptap 的容器内渲染。你可以利用这个类来将样式限定在编辑器内容上：

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

如果你将存储的内容显示在其他地方，可能没有 .tiptap 容器，所以你可以直接对使用的 HTML 标签进行全局样式设置：

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

方法 2：添加自定义类

你可以完全控制渲染过程，包括为所有内容添加类。

扩展

大多数扩展允许通过 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",
    },
  },
});

结合 Tailwind CSS

编辑器与 Tailwind CSS 也配合良好。下面是一个使用 @tailwindcss/typography 插件进行样式的示例。

https://embed.tiptap.dev/preview/Experiments/Tailwind

智能感知

如果你正在使用 TailwindCSS 智能感知，请将以下片段添加到 .vscode/settings.json 中，以在 TipTap 对象内部启用智能感知支持：

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

方法 3：自定义 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,
  ],
});

你应该将自定义扩展放在单独的文件中，但我想你已经明白了。