富文本編輯器，但可以協同編輯
Tiptap 演示#
下載 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'
// 設置 Hocuspocus WebSocket 提供者
const provider = new HocuspocusProvider({
url: 'ws://serverIP:1234',
name: 'example-document',
})
const editor = useEditor({
extensions: [
StarterKit.configure({
// 協同編輯擴展自帶歷史記錄處理
history: false,
}),
// 註冊 Tiptap 的文檔
Collaboration.configure({
document: provider.document,
}),
],
})
</script>
<style>
.ProseMirror{
border: 1px solid #eee;
min-height: 500px;
}
</style>
然後大家就可以協同編輯了
大家會發現 node 只是起了一個 websocket 長連結，而且幾乎沒有延遲，處理輕量級的協同編輯是完全沒問題的。