富文本编辑器，但是可以协同编辑
Tiptap Demo#
下载 tiptap
npm install @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit
vue 文件
<template>
<editor-content :editor="editor" />
</template>
<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
const editor = useEditor({
content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
extensions: [
StarterKit,
],
})
</script>
很简单，直接出来页面
协同编辑#
这里直接采用官网推荐的 websocket
下载 node 依赖
npm install @hocuspocus/server yjs
后端 Node 代码
import { Server } from "@hocuspocus/server";
const server = Server.configure({
name: "hocuspocus-fra1-01",
port: 1234,
timeout: 30000,
debounce: 5000,
maxDebounce: 30000,
quiet: true,
});
server.listen();
下载前端依赖
npm install @tiptap/extension-collaboration yjs y-webrtc y-prosemirror
前端代码
<template>
<editor-content :editor="editor" />
</template>
<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Collaboration from '@tiptap/extension-collaboration'
import { HocuspocusProvider } from '@hocuspocus/provider'
// Set up the Hocuspocus WebSocket provider
const provider = new HocuspocusProvider({
url: 'ws://serverIP:1234',
name: 'example-document',
})
const editor = useEditor({
extensions: [
StarterKit.configure({
// The Collaboration extension comes with its own history handling
history: false,
}),
// Register the document with Tiptap
Collaboration.configure({
document: provider.document,
}),
],
})
</script>
<style>
.ProseMirror{
border: 1px solid #eee;
min-height: 500px;
}
</style>
然后大家就可以协同编辑了
大家会发现 node 只是起了一个 websocket 长链接，而且几乎没有延时，处理轻量级的协同编辑是完全没有问题的。