Yjs 与 ProseMirror 集成教程

最新推荐文章于 2024-08-29 08:04:16 发布

宣昀芊

最新推荐文章于 2024-08-29 08:04:16 发布

阅读量327

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00622/article/details/141552110

版权

Yjs 与 ProseMirror 集成教程

y-prosemirrorProseMirror editor binding for Yjs项目地址:https://gitcode.com/gh_mirrors/yp/y-prosemirror

项目介绍

Yjs 是一个用于实时协作编辑的开源库，它支持多种数据类型和后端绑定。Y-Prosemirror 是 Yjs 的一个插件，专门用于与 ProseMirror 编辑器集成，实现多用户实时协作编辑功能。通过 Y-Prosemirror，开发者可以轻松地在 ProseMirror 编辑器中实现文档的实时同步和协作。

项目快速启动

安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Yjs 和 Y-Prosemirror：

npm install yjs y-prosemirror prosemirror-state prosemirror-view prosemirror-model

初始化项目

创建一个 HTML 文件，并引入必要的脚本：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Yjs ProseMirror Demo</title>
</head>
<body>
  <div id="editor"></div>
  <script src="index.js"></script>
</body>
</html>

创建一个 index.js 文件，并添加以下代码：

import { EditorState } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { Schema, DOMParser } from 'prosemirror-model'
import { schema } from 'prosemirror-schema-basic'
import { addListNodes } from 'prosemirror-schema-list'
import { exampleSetup } from 'prosemirror-example-setup'
import { ySyncPlugin, yCursorPlugin, yUndoPlugin } from 'y-prosemirror'
import { WebrtcProvider } from 'y-webrtc'
import { Doc } from 'yjs'

// 扩展 schema 以包含列表节点
const mySchema = new Schema({
  nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
  marks: schema.spec.marks
})

// 创建 Yjs 文档
const ydoc = new Doc()

// 创建 WebRTC 提供者
const provider = new WebrtcProvider('prosemirror-demo', ydoc)

// 获取 Yjs 文档的 ProseMirror 类型
const type = ydoc.get('prosemirror', 'xmlfragment')

// 初始化 ProseMirror 文档
const doc = DOMParser.fromSchema(mySchema).parse(document.querySelector('#editor'))

// 创建编辑器视图
const view = new EditorView(document.querySelector('#editor'), {
  state: EditorState.create({
    doc,
    plugins: exampleSetup({ schema: mySchema }).concat([
      ySyncPlugin(type),
      yCursorPlugin(provider.awareness),
      yUndoPlugin()
    ])
  })
})