javascript – 如何使用Google Drive Realtime API实现协作富文本编辑？

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

现在,我想为这个应用程序添加对富文本(只有粗体,下划线和链接等基础知识)的文本框的支持.文本框应该启用类似于Google Docs的协作文本编辑.我现在搜索和实验了几天但是我找不到如何交换数据或如何构建适合Drive Realtime的合适数据模型的正确解决方案API.

有一种方法可以让人想到在CollaborativeSting内交换HTML(或类似的标记).但是这样做不会有效,因为它可能迟早会破坏标记.

另一个(可能更好)起点是使用更多的abstract data model作为Quill editor does.(如果可能的话,我想稍后使用这个编辑器,但这不是必须的.)

“Hello！Here is a link.”的富文本模型如下所示：

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

我可以使用这些说明将上面的文档示例转换为“Hello！That is a a link.”：

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

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

有人会想到一个适用于富文本的合适的模型或数据交换过程吗？它不一定是最好的解决方案(如果介于两者之间).使用此API交换纯文本简直令人难以置信,但富文本似乎对我来说是不可能的.

谢谢你的帮助！

更新

我能够使用新信息Sheryl Simon provided me below来确定我的问题.通过使用IndexReferences,我现在能够将纯文本与格式信息隔离开来.

我添加了一些代码来保存用户的本地文本选择(可以是单个位置或范围),并在文本更改后恢复它.这很好用.我还可以添加对单个用户的多个文本选择的支持 – 因为每个用户只能更改自己的选择.

但我无法弄清楚一个模型,其中几个用户可以同时添加和删除例如粗体.如果我将CollaborativeList用于带有多个[start,end]数组的粗体文本,如果两个用户同时设置重叠范围,或者如果两个用户想要编辑相同的范围,我将得到一个损坏的数据集.同一时间(通过移除和重新插入范围或移动现有范围的范围标记).

以下是一些伪代码.所有索引都存储为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.这就是那些设计的目的.您基本上跟踪区域的开头和结尾的标记,该标记应该是粗体,斜体等.如果在区域之前或之内添加文本,则IndexReference将自动移动,因此它应该在逻辑上表现.

标签：rich-text-editor,google-drive-realtime-api,javascript,data-modeling,google-drive
来源： https://codeday.me/bug/20190728/1560229.html