Tiptap CollaborationCursor 扩展在多人同时编辑一个文档时可以显示每个用户的昵称和位置,你可以在多个浏览器中打开试试看效果。
npm install @tiptap/extension-collaboration-cursor
user 配置光标位置的昵称和颜色
CollaborationCursor.configure({
provider: this.provider,
user: {
name: '昵称',
color: '#f783ac',
avatar: 'https://www.itxst.com/img/logov31.png',
},
})
updateUser 更新用户信息
editor.commands.updateUser({
name: 'John Doe',
color: '#000000',
avatar: 'https://www.itxst.com/img/logov31.png',
})
Vue 例子
React 例子
<template>
<editor-content :editor="editor" />
</template>
<script>
import Collaboration from '@tiptap/extension-collaboration'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Placeholder from '@tiptap/extension-placeholder'
import Text from '@tiptap/extension-text'
import { Editor, EditorContent } from '@tiptap/vue-3'
import { WebrtcProvider } from 'y-webrtc'
import * as Y from 'yjs'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
provider: null,
}
},
mounted() {
const ydoc = new Y.Doc()
this.provider = new WebrtcProvider('tiptap-collaboration-extension', ydoc)
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
Collaboration.configure({
document: ydoc,
}),
Placeholder.configure({
placeholder: 'Write something … It’ll be shared with everyone else looking at this example.',
}),
],
})
},
beforeUnmount() {
this.editor.destroy()
this.provider.destroy()
},
}
</script>
<style>
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
/* Placeholder (at the top) */
.ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: #adb5bd;
pointer-events: none;
height: 0;
}
</style>
import Collaboration from '@tiptap/extension-collaboration'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Placeholder from '@tiptap/extension-placeholder'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'
import { WebrtcProvider } from 'y-webrtc'
import * as Y from 'yjs'
const ydoc = new Y.Doc()
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const provider = new WebrtcProvider('tiptap-collaboration-extension', ydoc)
export default () => {
const editor = useEditor({
extensions: [
Document,
Paragraph,
Text,
Collaboration.configure({
document: ydoc,
}),
Placeholder.configure({
placeholder:
'Write something … It’ll be shared with everyone else looking at this example.',
}),
],
})
return <EditorContent editor={editor} />
}
本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。