簡體   English   中英

如何使用Google Drive Realtime API實現協作富文本編輯?

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

我正在開發一個使用Google Drive Realtime API的網絡應用程序。 API用於存儲文檔的數據並同步活動協作者之間的所有修改。

現在,我想為這個應用程序添加對富文本(只有粗體,下划線和鏈接等基礎知識)的文本框的支持。 文本框應啟用類似於Google文檔的協作文本編輯。 我現在搜索並試驗了幾天,但是我找不到如何交換數據或如何構建適用於Drive Realtime API的合適數據模型的正確解決方案。

有一種方法可以讓人聯想到在CollaborativeSting中交換HTML(或類似的標記)。 但那不會起作用,因為它可能遲早會破壞標記。

另一個(可能更好)起點是使用Quill編輯器的更抽象的數據模型 (如果可能的話,我想稍后使用這個編輯器,但這不是必須的。)

Hello! Here is a link。 ”的富文本模型如下所示:

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交換純文本簡直令人難以置信,但富文本似乎對我來說是不可能的。

謝謝你的幫助!


更新

我能用Sheryl Simon在下面提供的新信息來確定我的問題。 通過使用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將自動移動,因此它應該在邏輯上表現。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM