Tiptap_extension_resize_image安装与配置指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00979/article/details/147318312

Tiptap_extension_resize_image安装与配置指南

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

1. 项目基础介绍

tiptap-extension-resize-image 是一个开源项目，主要提供了对富文本编辑器 tiptap 的扩展功能，允许用户调整编辑器中图片的大小。该扩展已经在 React、Vue 和 NextJS 中进行了测试，但在 VanillaJS 中的稳定性可能无法保证。

该项目主要使用的编程语言是 TypeScript 和 JavaScript。

2. 项目使用的关键技术和框架

tiptap: 一个强大的、可定制的富文本编辑器框架。
TypeScript: 为 JavaScript 提供类型系统的语言扩展，增强了代码的可维护性。
JavaScript: web 开发的核心技术，用于实现项目的交互功能。

3. 项目安装和配置的准备工作

在开始安装之前，请确保您的环境中已经安装了以下工具：

Node.js: JavaScript 运行环境，用于执行 JavaScript 代码。
npm: Node.js 的包管理工具，用于管理项目的依赖。

详细安装步骤

克隆项目仓库

打开命令行工具，执行以下命令克隆项目：
```
git clone https://github.com/bae-sh/tiptap-extension-resize-image.git
```
进入项目目录

克隆完成后，进入项目目录：
```
cd tiptap-extension-resize-image
```
安装依赖

在项目目录中，执行以下命令安装项目所需的依赖：
```
npm install
```
使用扩展

在您的项目中，您需要按照以下步骤使用 tiptap-extension-resize-image 扩展：
- 首先，引入 @tiptap/starter-kit 和 tiptap-extension-resize-image：
```
import StarterKit from '@tiptap/starter-kit';
import ImageResize from 'tiptap-extension-resize-image';
```
- 然后，在 useEditor 钩子中添加扩展：
```
const editor = useEditor({
  extensions: [
    StarterKit,
    ImageResize,
  ],
  content: `<img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />`,
});
```
这将启用编辑器中的图片大小调整功能。