Tiptap图片调整大小扩展插件使用教程

邬情然Harley

于 2025-04-18 07:10:40 发布

阅读量366

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00977/article/details/147318310

版权

Tiptap图片调整大小扩展插件使用教程

tiptap-extension-resize-image tiptap-extension-resize-image 项目地址: https://gitcode.com/gh_mirrors/ti/tiptap-extension-resize-image

1. 项目介绍

Tiptap是一套开源的内容编辑和实时协作工具，适用于开发类似于Notion或Google Docs的应用程序。本项目tiptap-extension-resize-image是一个专门为Tiptap设计的扩展插件，它提供了调整编辑器中图片大小的功能。该插件已经在React、Vue和NextJS中进行了测试，但在VanillaJS中的稳定性可能无法保证。此外，它还可以对图片位置进行对齐。

2. 项目快速启动

首先，确保你已经安装了Node.js环境。

安装插件

使用npm来安装tiptap-extension-resize-image：

npm install tiptap-extension-resize-image

使用插件

在你的React项目中，你可以按照以下方式使用该插件：

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

const editor = useEditor({
  extensions: [
    StarterKit,
    ImageResize
  ],
  content: `<img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />`
});

确保你的组件中包含了editor。

3. 应用案例和最佳实践

调整图片大小

在编辑器中插入图片后，你可以通过简单的拖动来调整图片的大小。

对齐图片

插件还允许你对齐图片。你可以为图片添加适当的样式来实现不同的对齐方式。

import { Image } from '@tiptap/extension-image';

const editor = useEditor({
  extensions: [
    StarterKit,
    ImageResize,
    Image.configure({
      // 在这里配置图片的默认对齐方式
      align: 'center',
    }),
  ],
  // ...
});