tiptap 图片

使用这个扩展来渲染 <img> 标签。默认情况下，这些图片是块级元素。如果你想将图片与文本行内展示，设置 inline 选项为 true。

限制
此扩展仅负责图片的渲染。它不会将图片上传到你的服务器，那完全是另一码事。

安装

npm install @tiptap/extension-image

配置

inline

将图片节点作为内联元素渲染，例如在 <p> 标签中：<p><img src="spacer.gif"></p>。默认情况下，图片与段落处于同一级别。

这完全取决于你想要的编辑体验，但在从 Quill 转换到 Tiptap 的情况下可能会有用。

默认值：false

Image.configure({
  inline: true,
});

allowBase64

允许解析 base64 字符串形式的图片 <img src="data:image/jpg;base64...">。

默认值：false

Image.configure({
  allowBase64: true,
});

HTMLAttributes

自定义应添加到渲染后的 HTML 标签上的 HTML 属性。

Image.configure({
  HTMLAttributes: {
    class: "my-custom-class",
  },
});

命令

setImage()

将当前节点转换为图片。

editor.commands.setImage({ src: "https://example.com/foobar.png" });
editor.commands.setImage({
  src: "https://example.com/foobar.png",
  alt: "一个无聊的示例图片",
  title: "一个示例",
});

源代码

packages/extension-image/

使用示例

https://embed.tiptap.dev/preview/Nodes/Image