atlaskit编辑器如何实现实时协作？答案

【问题标题】：How to implement real time collaboration in atlaskit editor?atlaskit编辑器如何实现实时协作？
【发布时间】：2020-04-24 14:06:19
【问题描述】：

我正在尝试使用 Atlaskit 的 Editor Component 创建实时 WYSIWYG 编辑器，但是没有适当的文档来完成工作，我对此感到困惑collabEdit 部分，React 给出了 error: cannot resolve CollabProvider，这个 CollabProvider 到底是什么，它是如何工作的？

<Editor appearence="comment" collabEdit={{
                useNativePlugin: true,
                provider: Promise.resolve(
                  new CollabProvider(
                    {
                      url: 'http://localhost:3000',
                      securityProvider: () => ({
                        headers: {
                          Authorization: asapToken,
                          'user-ari': userId,
                        },
                        omitCredentials: true,
                      }),
                      docId: 24,
                      userId: 12,
                    },
                    pubSubClient,
                  ),
                ),
                inviteToEditHandler: this.inviteToEditHandler,
                userId: 12,
                isInviteToEditButtonSelected: true
              }} />

【问题讨论】：

标签： javascript node.js reactjs rich-text-editor atlaskit

【解决方案1】：

根据我的经验，您需要使用 Atlaskit 编辑器 + Prosemirror 调整 + y-websocket：https://demos.yjs.dev/atlaskit/atlaskit.html。我仍然试图自己弄清楚整个事情。我仍然不明白应该如何启用<img> 元素。请参阅https://github.com/yjs/yjs-demos/tree/master/atlaskit 的演示源。

注意需要修改demo中的atlaskit.js指向自己的服务器

const provider = new WebsocketProvider('wss://demos.yjs.dev', 'atlaskit', ydoc)

第一个参数是y-websocket服务器，另一个参数是协作的频道名称。

y-websocket 服务端数据的持久化方法还是有点未知。有关详细信息，请参阅https://github.com/yjs/y-websocket/issues/14。如果您计划在一台机器上运行 y-websocket 服务器并且您对简单的文件支持数据库感到满意，那么使用 y-leveldb 可能就足够了。

【讨论】：