富文本エディター、しかし共同編集が可能です
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>
とても簡単です、直接ページを表示します
共同編集#
ここでは、公式ウェブソケットを使用します
ノードの依存関係をダウンロード
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>
それからみんなで共同編集できます
みなさんは、ノードが WebSocket の長いリンクを起動しているだけで、ほとんど遅延がなく、軽量の共同編集を処理するのに問題はありません。