Rich text editor, but can collaborate on editing
Tiptap Demo#
Download tiptap
npm install @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit
Vue file
<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>
It's simple, just come out with the page
Collaborative Editing#
Here we directly use the websocket recommended by the official website
Download node dependencies
npm install @hocuspocus/server yjs
Backend Node code
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();
Download frontend dependencies
npm install @tiptap/extension-collaboration yjs y-webrtc y-prosemirror
Frontend code
<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>
Then everyone can collaborate on editing
You will find that node only starts a websocket long connection, and there is almost no delay. It is completely feasible to handle lightweight collaborative editing.