聊聊 Tiptap 造字组件的来龙去脉

先说一句，Tiptap 真是个玩儿得hen爽的编辑器。

它本身Yi经够强大，光是那套插件机制就Neng把你想的功Neng全部搬进来。

可我这次想干点不一样的——造字。

对，就是在富文本里插入自定义的“字”，比如图标、特殊符号之类的。

别慌，我一步步跟你掰扯，保证你听完后Neng自己动手写出来。

先说实话，Tiptap 的底层是 ProseMirror。

所以它所有节点dou是Ke以继承改造的。

我们要Zuo的，就是在Yi有的 Image 节点上加点料，让它变成“造字”节点。

别忘了Image 本来就是行内元素，正好满足我们在文字中间塞图的需求。

import { Image as TiptapImage } from "@tiptap/extension-image";
export const GlyphImage = TiptapImage.extend({
  name: "glyphImage",
  addOptions {
    return {
      ...super.addOptions?.,
      inline: true,
      HTMLAttributes: {
        class: "glyph-image",
      },
    };
  },
  addCommands {
    return {
      ...super.addCommands?.,
      setGlyphImage:
         =>
         => {
          return commands.insertContent({
            type: this.name,
            attrs: options,
          });
        },
    };
  },
});

kan到这里你可Neng会想：“哎呀，这代码好像和普通图片差不多啊？”

没错！关键就在于我们后面给它加了一个 alt 属性，用来存放替换文本。

这玩意儿以后搜索引擎会抓到，也算是 SEO 小技巧之一啦。

import { useEditor } from "@tiptap/react";
import { GlyphImage } from "@/extensions/glyph-image";
const editor = useEditor({
  extensions: ,
});

记得把它放在 extensions 数组里不然编辑器根本不认识这个新标签。

editor.commands.setGlyphImage({
  src: "data:image/png;base64,...", // 或者外链地址
  alt: "自定义字符描述",
  title: "可选标题",
});

这段代码其实就像点开了一个弹窗，让你填入图片地址和 alt 文本。

Ru果你想直接上传本地文件，Ke以再包装一层上传组件——别担心，我后面会示例一下简易实现。

Zui常见的办法就是用一个隐藏的 file input，然后配合按钮触发点击事件。

const fileInputRef = React.useRef;
const handleUpload = async  => {
  const file = e.target.files;
  if  return;
  // 假设有 uploadToServer 方法返回图片 URL
  const url = await uploadToServer;
  editor.commands.setGlyphImage;
};
 fileInputRef.current.click}>上传图片

这里我用了 async/await，你要是嫌麻烦也Ke以直接 Promise 写法，反正思路dou差不多。

.glyph-image {
  display: inline !important;
  width: 1em;
  height: auto;
  vertical-align: -0.125em; /* 微调位置 */
}

把宽度设成 1em，这样它就会随文字大小自动缩放，视觉上geng自然。

先别急，这事儿常见得hen。百度爬虫主要kan的是纯文本和标准标签，对自定义节点（比如我们的 ) 的识别Neng力有限。

解决办法有两招：

在 上加完整的 alt/title，让爬虫Neng读到关键词。

If you really want to be safe, also add a hiddentext fallback.

Aha，这样百度基本就Neng抓到你的自定义字符描述了收录率自然提升。

Cc，我这边主要用 React，但 Vue 同样Ke以照搬思路，只是写法稍有不同：

// Vue 示例
import { useEditor } from '@tiptap/vue-3'
import { GlyphImage } from '@/extensions/glyph-image'
export default {
  setup {
    const editor = useEditor({
      extensions: ,
    })
    return { editor }
  },
}

AFAIK，大多数博客平台dou支持自定义插件或 Markdown 。我们只要把上面的 打包成一个 npm 包，就Neng直接 npm i 安装，用起来和普通 Image 完全一样。

A 在项目根目录运行 `npm install @myorg/tiptap-glyph`

B 然后在编辑器配置里引入并注册：

C Zui后调用 `editor.commands.setGlyphImage`

#1： 别忘了给 .glyph-image 加 {display:inline}, 不然会独占一行，kan着怪怪的。哈哈.

#2： Ru果使用外链图片，要确保 CORS 正确，否则浏览器可Neng报错。咱就是说这种事儿遇到一次就够了.

#3： alt 文本一定要写明关键词，否则 SEO 收效甚微。懂吗？你懂的.

#4： 开发时记得打开 devtools kan一下生成的 DOM，确认属性dou挂上去了。不对不对，是应该打开 “Elements” 面板查kan，而不是 “Network”。哈哈.

- 用 CSS 动画给 glyph 加个呼吸灯效果； - 用 SVG 替代 PNG，实现无限放大不失真； - 把 alt 文本Zuo成 Tooltip，在鼠标悬停时显示解释文字； - Zui后Ru果真的想让百度爱上你的页面Ke以在页面底部加一段隐藏但可读的关键字列表，不要搞得太作弊，否则被惩罚也是分分钟的事儿。害.

Aight，那今天关于 Tiptap 造字组件的大致实现就聊到这儿啦。希望你玩得开心，有啥问题直接留言哈！祝你玩转富文本，创作无阻~ 😊