---
title: "Dropcursor 扩展"
description: "使用 Dropcursor 扩展在编辑器内拖动项目时添加光标。在文档中了解如何使用它！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/dropcursor"
---

# Dropcursor 扩展

使用 Dropcursor 扩展在编辑器内拖动项目时添加光标。在文档中了解如何使用它！

此扩展加载了 [ProseMirror Dropcursor 插件](https://github.com/ProseMirror/prosemirror-dropcursor)，该插件在将某物拖入编辑器时显示光标在放置位置。

请注意，Tiptap 是无头的，但 dropcursor 需要 CSS 来显示样式。可以设置颜色和宽度，并且可以自由添加自定义 CSS 类。

> **Interactive demo:** [Dropcursor](https://embed.tiptap.dev/preview/Extensions/Dropcursor)

## 安装

```bash
npm install @tiptap/extensions
```

## 用法

```js
import { Editor } from '@tiptap/core'
import { Dropcursor } from '@tiptap/extensions'

new Editor({
  extensions: [Dropcursor],
})
```

## 设置

### color

dropcursor 的颜色。

默认值：`'currentColor'`

```js
Dropcursor.configure({
  color: '#ff0000',
})
```

### width

dropcursor 的宽度。

默认值：`1`

```js
Dropcursor.configure({
  width: 2,
})
```

### class

应应用于 dropcursor 的一个或多个 CSS 类。

```js
Dropcursor.configure({
  class: 'my-custom-class',
})
```

## 源代码

[packages/extensions/src/drop-cursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extensions/src/drop-cursor/)

## 最小安装

```js
import { Editor } from '@tiptap/core'
import { Dropcursor } from '@tiptap/extensions/dropcursor'

new Editor({
  extensions: [Dropcursor],
})
```