自定义tiptap插件

本文为开发开源项目的真实开发经历，感兴趣的可以来给我的项目点个star，谢谢啦~

具体博文介绍：
开源｜Documind协同文档（接入deepseek-r1、支持实时聊天）Documind 🚀 一个支持实时聊天和接入 - 掘金

我干了什么

我定义了两个插件：

• font-size：支持通过setFontSize设置tiptap编辑器字体大小，通过unsetFontSize重置为默认大小。
• line-height：支持通过设置setLineHeight设置tiptap编辑器行高，通过unsetLineHeight重置为默认行高。

源码参考

这里就不一点一点讲解了，注释看不懂的话可以叫AI帮你解析。

font-size插件：

import { Extension } from "@tiptap/core";
import "@tiptap/extension-text-style";// 声明类型
declare module "@tiptap/core" {interface Commands<ReturnType> {fontSize: {/** 设置字体大小（支持CSS单位如12px/1.2rem等） */setFontSize: (fontSize: string) => ReturnType;/** 清除字体大小设置 */unsetFontSize: () => ReturnType;};}
}// 创建扩展
export const FontSizeExtension = Extension.create({name: "fontSize",// 扩展配置项addOptions() {return {types: ["textStyle"], // 作用对象为文本样式标记};},// 注册全局属性addGlobalAttributes() {return [{types: this.options.types, // 应用范围（textStyle类型）attributes: {fontSize: {default: null, // 默认无字体大小// 从DOM解析字体大小（读取style属性）parseHTML: (element) => element.style.fontSize,// 渲染到DOM时生成样式renderHTML: (attributes) => {if (!attributes.fontSize) {return {}; // 无设置时返回空对象}return {style: `font-size: ${attributes.fontSize};`, // 生成内联样式};},},},},];},// 注册编辑器命令addCommands() {return {/** 设置字体大小命令 */setFontSize:(fontSize: string) =>({ chain }) => {return chain().setMark("textStyle", { fontSize }) // 更新文本样式标记.run();},/** 清除字体大小命令 */unsetFontSize:() =>({ chain }) => {return chain().setMark("textStyle", { fontSize: null }) // 清除字体大小属性.removeEmptyTextStyle() // 移除空文本样式标记.run();},};},
});

line-height插件：

import { Extension } from "@tiptap/core";// 类型声明：扩展Tiptap的命令接口
declare module "@tiptap/core" {interface Commands<ReturnType> {lineHeight: {/** 设置行高（支持CSS单位如1.5/2/24px等） */setLineHeight: (lineHeight: string) => ReturnType;/** 重置为默认行高 */unsetLineHeight: () => ReturnType;};}
}export const LineHeightExtension = Extension.create({name: "lineHeight",// 扩展配置项addOptions() {return {types: ["paragraph", "heading"], // 应用行高样式的节点类型defaultLineHeight: null, // 默认行高（null表示不设置）};},// 添加全局属性处理addGlobalAttributes() {return [{types: this.options.types, // 应用到的节点类型attributes: {lineHeight: {// 默认值（从配置项获取）default: this.options.defaultLineHeight,// 渲染到HTML时的处理renderHTML: (attributes) => {if (!attributes.lineHeight) {return {};}// 将行高转换为行内样式return {style: `line-height: ${attributes.lineHeight};`,};},// 从HTML解析时的处理parseHTML: (element) => {return {// 获取行高样式或使用默认值lineHeight: element.style.lineHeight || this.options.defaultLineHeight,};},},},},];},// 添加自定义命令addCommands() {return {setLineHeight:(lineHeight) =>({ tr, state, dispatch }) => {// 创建事务副本以保持不可变性tr = tr.setSelection(state.selection);// 遍历选区内的所有节点state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {// 只处理配置的类型节点if (this.options.types.includes(node.type.name)) {tr = tr.setNodeMarkup(pos, undefined, {...node.attrs,lineHeight, // 更新行高属性});}});// 提交事务更新if (dispatch) {dispatch(tr);}return true;},unsetLineHeight:() =>({ tr, state, dispatch }) => {tr = tr.setSelection(state.selection);// 遍历选区节点重置行高state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {if (this.options.types.includes(node.type.name)) {tr = tr.setNodeMarkup(pos, undefined, {...node.attrs,lineHeight: this.options.defaultLineHeight, // 重置为默认值});}});if (dispatch) {dispatch(tr);}return true;},};},
});

使用案例

首先我们在extensions中添加扩展以激活

extensions: [/*......*/FontSizeExtension,LineHeightExtension.configure({types: ["paragraph", "heading"],}),/*......*/
];