Tiptap 简单编辑器模版

上一篇介绍了Tiptap 编辑器的基础使用，本篇主要介绍 Tiptap 的简单编辑器模版Simple template，以及如何改造模版。

Tiptap 是一个基于 ProseMirror 的 Headless 富文本编辑器框架，它采用模块化设计，通过扩展（Extensions）机制来实现各种功能。每个扩展可以定义自己的节点（Nodes）、标记（Marks）、命令（Commands）等。

Editor 实例：Tiptap 的核心，管理整个编辑器的状态和行为
Extensions 扩展：功能模块的基本单位，可以是节点或标记
Nodes 节点：文档结构的基本单位，如段落、标题、列表项等
Marks 标记：应用于文本的样式，如粗体、斜体、链接等
Commands 命令：用于修改编辑器状态的操作方法

simple-editor 模版

Tiptap 的 StarterKit 仅提供基础的富文本功能逻辑，不会自带默认样式（如标题字体大小、段落首行缩进等），需要手动添加 CSS 样式来美化内容。

可以安装一个简单编辑器模版Simple template，其包括常用的开源扩展和 UI 组件。

bash 复制代码

npx @tiptap/cli@latest add simple-editor

SimpleEditor：主编辑器组件，整合所有功能
- tiptap-templates 文件夹
Toolbar：工具栏组件，提供各种编辑操作按钮
- tiptap-ui 文件夹
Extensions：预配置的扩展集合，包括基础文本格式、列表、链接等
- tiptap-ui-primitive 文件夹
Styles：配套的样式文件，提供美观的默认外观

操作完成后，会在项目中加入一系列的文件，包括组件、配置文件、样式文件等等：

在 global.css全局样式文件中添加模版的样式文件：

css 复制代码

/* tiptap */
@import "./styles/_variables.scss";
@import "./styles/_keyframe-animations.scss";

配置完成后，页面样式乱了呀，影响其他内容样式了，如下图所示：

排查后，发现是暗黑模式和默认宽高影响的，需要调整一下：

tsx 复制代码

import { SimpleEditor } from "@/components/tiptap-templates/simple/simple-editor";
import { styled } from "styled-components";

export default function Page() {
  return (
    <Container>
      <SimpleEditor />
    </Container>
  );
}

const Container = styled.div`
  width: 500px;
  margin-top: 30px;
  border: 1px solid #eee;
  .simple-editor-wrapper {
    width: 100%;
    height: 300px;
  }
`;

simple-editor 改造

主题

默认主题是暗黑模式，改为明亮模式：

tsx 复制代码

// 修改theme-toggle.tsx文件

// 注释掉下列代码：
React.useEffect(() => {
  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
  const handleChange = () => {
    // setIsDarkMode(mediaQuery.matches)
  };
  mediaQuery.addEventListener("change", handleChange);
  return () => mediaQuery.removeEventListener("change", handleChange);
}, []);

// React.useEffect(() => {
//   const initialDarkMode =
//     !!document.querySelector('meta[name="color-scheme"][content="dark"]') ||
//     window.matchMedia("(prefers-color-scheme: dark)").matches;
//   setIsDarkMode(initialDarkMode);
// }, []);

然后在工具条中去掉该功能即可

工具条样式

默认工具条是横向滚动的，改为自适应

css 复制代码

/* 修改simple-editor.css文件 */
.simple-editor-wrapper {
  width: 100%;
  height: 300px;
  border: 1px solid #eee;
  .tiptap-toolbar {
    flex-wrap: wrap;
    /* 或者直接隐藏首个 <Spacer /> 组件 */
    > div:first-of-type {
      flex: 0 !important;
    }
  }
}

调整后效果：

工具条汉化

默认工具条是英文的，改为中文：

操作组件 undo-redo-button

tsx 复制代码

<UndoRedoButton action="undo" />
<UndoRedoButton action="redo" />
// 修改tiptap-ui/undo-redo-button/use-undo-redo.ts文件
export const historyActionLabels: Record<UndoRedoAction, string> = {
  undo: "撤销",
  redo: "重做",
}