如何使用 Google 云端硬盘实时 API 实现协作式富文本编辑

How to implement collaborative rich text editing with Google Drive Realtime API?

本文关键字：协作 实现 文本编辑 API 实时 何使用 Google 云端 硬盘      更新时间：2023-09-26

我正在开发一个使用Google Drive Realtime API的Web应用程序。该 API 用于存储文档的数据，并在活动协作者之间同步所有修改。

现在，我想在此应用程序中添加对带有富文本的文本框（仅一些基础知识，如粗体，下划线和链接）的支持。文本框应启用类似于 Google 文档的协作文本编辑功能。我搜索并试验了几天，但找不到合适的解决方案来交换数据或如何构建适合与云端硬盘实时 API 配合使用的数据模型。

人们可以想到几种方法，例如在 CollaborativeSting 中交换 HTML（或类似的标记）。但这行不通，因为它迟早会破坏标记。

另一个（可能更好）的起点是像 Quill 编辑器那样使用更抽象的数据模型。（如果可能的话，我想稍后使用此编辑器，但这不是必须的。

"Hello！下面是一个链接。 看起来像这样：

var doc = [
    { insert: "Hello!", attributes: { bold: true } },
    { insert: " Here is a " },
    { insert: "link.", attributes: { href: 'http://example.org' } }
];

我可以将上面的文档示例转换为"Hello！这是一个链接"，并带有以下说明：

var operation = [
    { retain: 7 },
    { insert: "That's", attributes: { italic: true } },
    { delete: 1 }
];

但是，如果更多的协作者同时键入或格式化，将此模型保存到 CollaborativeList 中似乎也不是解决方案。特别是因为我无法影响服务器端的行为。

有人能想到一个合适的模型或数据交换过程来处理富文本吗？它不一定是最好的解决方案（如果两者之间有什么）。使用此 API 交换纯文本非常简单，但富文本对我来说似乎是不可能的。

感谢您的任何帮助！

更新

我

能够用谢丽尔·西蒙在下面提供给我的新信息来精确我的问题。通过使用 IndexReferences，我现在能够将纯文本与格式信息隔离开来。

我添加了一些代码来保存用户的本地文本选择（可以是单个位置或范围），并在文本更改后恢复它。这工作正常。我还可以添加对单个用户的多个文本选择的支持 - 因为每个用户只能更改自己的选择。

但是我想不出一个模型，其中多个用户可以同时添加和删除粗体文本的范围。如果我对包含多个[start, end]数组的粗体文本使用 CollaborativeList，如果两个用户同时设置重叠范围，或者两个用户想要同时编辑同一范围（通过删除和重新插入范围或移动现有范围的范围标记），我将得到一个损坏的数据集。

下面是一些伪代码。所有索引都存储为 IndexReferences：

Model:           
[                User1: makeBold([8,20])
    [ 0, 10]     => removeValue([0,10]), removeValue([15,36]), push([0,36])
    [15, 36]       
    [77, 82]     User2: removeBold([0,5])
]                => removeValue([0,10]), push([6,10])

如果两个用户都从左侧显示的数据集开始，并且首先应用第一个用户的操作，则第二个用户无法再删除[0,10]（因为它已被替换），因此文本保持粗体，并将[6,10]推送到列表中会导致重复数据。如何防止这些问题？

查看 IndexReferences。 这就是这些设计的目的。 您基本上跟踪区域的开始和结束标记，该标记应该是粗体，斜体等。 如果在区域之前或区域内添加文本，索引引用将自动移动，因此它的行为应该符合逻辑。

相关文章：