向您的编辑器添加图像节点

Tiptap 编辑器中图像节点的样式。

安装

您可以通过 Tiptap CLI（适用于 Vite 或 Next.js）添加节点组件。

npx @tiptap/cli add image-node

手动集成

对于除 Vite 或 Next.js 以外的框架，请从开源代码库手动添加节点组件。

导入样式

该组件要求您导入我们的样式，这些样式已添加到 styles/keyframe-animation.scss 和 styles/_variables.scss。

使用方法

ImageNode 提供了编辑器中图像的样式。要使用它，您需要将其包含在您的项目中，并确保您正在使用 Tiptap 的图像扩展。

import { useEditor, EditorContent } from '@tiptap/react'
import { Image } from '@tiptap/extension-image'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/image-node/image-node.scss'

export default function EditorWithImages() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, Image],
    content: '<img src="/images/placeholder-image.png" alt="示例图像" />',
  })

  return <EditorContent editor={editor} />
}

特性

适当的图像尺寸（最大宽度：100%）
一致的边距和间距
高亮选择状态以改善用户体验
美观的边角半径
与线程系统兼容

要求

开源功能

@tiptap/extension-image（建议使用以获得完整功能）