2010-01-25 122 views
8

目前我正在使用google-diff-match-patch來實現一個實時編輯工具,它可以同步多個用戶之間的文本。當操作只是純文本時,一切都很好,每個用戶的操作(添加/刪除文本)都可以通過與舊文本快照與google-diff的幫助進行比較來區分。但是當涉及豐富格式的文本(如粗體/斜體)時,比較htmlstring時,google-diff不能很好地工作。 <和>的字符出現會將差異結果搞亂,特別是當粗體/斜體格式相互嵌入時。是否有一個針對htmlstring的JS diff庫,就像純文本上的google-diff-match-patch一樣?

任何人都可以提出一個類似的庫,如google-diff來比較htmlstrings嗎?或者有什麼建議可以解決我的問題與谷歌差異?我明白谷歌差異是專爲純文本,但真的沒有找到一個比它更好的庫,所以它也可以工作,如果可行的增強谷歌diff可以提供幫助。

回答

0

看一看SynchroEdit,可能是有用的。

+0

Gamers2000,感謝您的評論。我曾嘗試過SynchoEdit,但沙箱和開發版本都沒有工作。順便說一句,我也在你原來的「OT庫問題」中提出一個問題,你是否也在使用google-diff-match-patc?你如何使用它豐富的格式htmlstrings?感謝您的任何意見。 – Steve 2010-01-27 02:17:10

+0

您好Steve,我正在使用diff-match-patch,但我正在使用它來同步純文本。 另外,我實際上使用了MobWrite(http://code.google.com/p/google-mobwrite),它是一個diff-match-patch的實現。 對不起,我不能有太大的幫助! – gamers2000 2010-01-27 03:38:06

+0

感謝您的快速評論。 – Steve 2010-01-27 05:01:26

2

Pretty Diff可以處理所有你需要的東西,除非你需要更新DOM響應,以便在點擊按鈕時針對「onkeyup」事件啓動diff。

http://prettydiff.com/

7

在谷歌的Diff-比賽貼片項目股份的一些想法的維基。從 http://code.google.com/p/google-diff-match-patch/wiki/Plaintext

One method is to strip the tags from the HTML using a simple regex or node-walker. Then diff the HTML content against the text content. Don't perform any diff cleanups. This diff enables one to map character positions from one version to the other (see the diff_xIndex function). After this, one can apply all the patches one wants against the plain text, then safely map the changes back to the HTML. The catch with this technique is that although text may be freely edited, HTML tags are immutable.

Another method is to walk the HTML and replace every opening and closing tag with a Unicode character. Check the Unicode spec for a range that is not in use. During the process, create a hash table of Unicode characters to the original tags. The result is a block of text which can be patched without fear of inserting text inside a tag or breaking the syntax of a tag. One just has to be careful when reconverting the content back to HTML that no closing tags are lost.

我有一種預感,第二個想法,地圖HTML標籤對Unicode的佔位符,可能會更好地工作比一個原本想......特別是如果你的HTML標籤是從一些縮小的集合,以及在顯示交錯(刪除線/加下劃線)diff標記時可以執行一點點打開/關閉修改。

另一種可能使用簡單樣式的方法是刪除HTML標籤,但記住受影響的字符索引。例如,「職位8-15是粗體」。然後,執行明文差異。最後,使用wiki第一種方法中的diff_xIndex位置映射思想,智能地重新插入HTML標籤以重新應用樣式到存活/添加的範圍。 (也就是說,如果老位置8-13活了下來,但轉移到20-25,插入周圍還有在B標記。)

+0

這又如何:轉義html字符(<, >,&),做所有的差異/補丁/合併工作和unescape結果。似乎是我最穩定的解決方案。 – ayke 2012-01-25 12:31:03

+1

我想你會發現這種方法會導致完全相同的輸出而不是逃避它們。差異算法沒有像任何其他字符一樣處理它們的問題;問題在於保持它們的平衡,而逃避它們並不能解決這個問題。 – gojomo 2012-01-25 18:20:35

+2

我經歷了這個,最終創建了一個包裝庫來幫助使用'diff_match_patch'所需的「演示工作」:https://github.com/arnab/jQuery.PrettyTextDiff – arnab 2013-01-24 09:42:54

相關問題