---
title: "CollaborationCaret 扩展"
description: "在 Tiptap 中使用协作光标扩展来显示其他用户的光标和他们的名字，同时他们在输入。更多内容请见文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/collaboration-caret"
---

# CollaborationCaret 扩展

在 Tiptap 中使用协作光标扩展来显示其他用户的光标和他们的名字，同时他们在输入。更多内容请见文档！

此扩展添加了有关所有连接用户的信息（如他们的名字和指定的颜色）、他们当前的光标位置和他们的文本选择（如果有的话）。

它需要一个协作编辑器，因此请确保查看 [Tiptap 协作文档](https://tiptap.zhcndoc.com/collaboration/getting-started/overview.md)，以获取完全托管或本地部署的协作服务器解决方案。

> **公开演示:**
>
> 此编辑器的内容与其他用户共享。

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

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

在多个浏览器窗口中打开此页面进行测试。

## 安装

```bash
npm install @tiptap/extension-collaboration-caret
```

此扩展需要 [`Collaboration`](https://tiptap.zhcndoc.com/collaboration/getting-started/overview.md) 扩展。

## 设置

### provider

一个 Y.js 网络提供者，例如一个 [Tiptap 协作](https://tiptap.zhcndoc.com/collaboration/getting-started/overview.md) 实例。

默认值: `null`

### user

当前用户的属性，假设有名字和颜色，但可以用于任何属性。这些值与所有其他连接的客户端进行同步。

默认值: `{ user: null, color: null }`

### render

光标的渲染函数，查看 [扩展源代码](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-caret/) 以获取示例。

### selectionRender

选择的渲染函数，查看 [扩展源代码](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-caret/) 以获取示例。

## Styling

此扩展不包括默认样式。如果没有以下 CSS，光标将渲染为未设置样式的内联元素。

将以下样式添加到你的项目中：

```css
/* 给远程用户显示光标 */
.tiptap .collaboration-carets__caret {
  border-left: 1px solid #0d0d0d;
  border-right: 1px solid #0d0d0d;
  margin-left: -1px;
  margin-right: -1px;
  pointer-events: none;
  position: relative;
  word-break: normal;
}

/* 在光标上方显示用户名 */
.tiptap .collaboration-carets__label {
  border-radius: 3px 3px 3px 0;
  color: #0d0d0d;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  left: -1px;
  line-height: normal;
  padding: 0.1rem 0.3rem;
  position: absolute;
  top: -1.4em;
  user-select: none;
  white-space: nowrap;
}
```

## 命令

### updateUser()

传递一个包含当前用户更新属性的对象。它期望有一个 `name` 和一个 `color`，但你也可以添加其他字段。

```js
editor.commands.updateUser({
  name: 'John Doe',
  color: '#000000',
  avatar: 'https://unavatar.io/github/ueberdosis',
})
```

## 源代码

[packages/extension-collaboration-caret/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-caret/)

协作

系好安全带！使你的富文本编辑器通过 Tiptap 协作进行协作。

实时一切
离线优先 & 无冲突
由我们管理和托管或在你的场所

[了解更多](https://tiptap.zhcndoc.com/collaboration/getting-started/overview.md)