10
votes

Existe-t-il une bibliothèque de DIFF JS contre HTMLString, tout comme Google-Diff-Match-Patch sur le texte brut?

Actuellement, j'utilise actuellement Google-Diff-Match-Patch pour implémenter un outil d'édition en temps réel, qui peut synchroniser des textes entre plusieurs utilisateurs. Tout fonctionne bien lorsque les opérations ne sont que des textes simples, chaque opération de chaque utilisateur (textes d'ajout / suppression) pourrait être différée en comparant à l'ancienne instantanée de texte avec l'aide de Google-Diff. Mais lorsque des textes de format riche (comme audacieux / italiques) sont impliqués, Google-Diff ne fonctionne pas bien lors de la comparaison du HTMLString. L'occurrence de caractère de foiré les résultats du diff, en particulier lorsque le format gras / italique est intégré l'un de l'autre.

Quelqu'un pourrait-il suggérer une bibliothèque similaire comme Google-Diff pour DIFF HTMLStrings? Ou toute suggestion peut être corrigée mon problème avec Google-DIFF? J'ai compris Google-Difff est conçu pour le texte brut, mais je n'ai vraiment pas trouvé de meilleure bibliothèque que jusqu'à présent, cela fonctionne également si une amélioration réalisable sur Google-Diff peut aider.


0 commentaires

4 Réponses :


0
votes

Jetez un coup d'œil à Synchroedit , pourrait être utile.


2 commentaires

Gamers2000, merci pour le commentaire. J'ai essayé Synchoedit, mais ni Sandbox Nor Dev version ne fonctionne. BTW, j'ai également posé une question dans votre "Question de la bibliothèque" d'origine, utilisez-vous également avec Google-Diff-Match-patc? Comment l'utilisez-vous avec du format riche HTMLINGS? Merci pour des commentaires.


Salut Steve, je travaille avec Diff-Match-Patch, mais je l'utilise pour synchroniser le texte brut. En outre, j'utilise réellement mobwrite ( code.google.com/p/google-mobwrite), qui est une implémentation de DIFF-Match-patch. Désolé je ne peux pas être beaucoup d'aide!




8
votes

Le wiki au projet Google-Diff-Match-Patch partage quelques idées. De http://code.google.com/p/google-Diff. -Match-patch / wiki / plaintext :

Une méthode consiste à supprimer les étiquettes du HTML à l'aide d'une simple regex ou de noeud-walker. Puis diffusez la teneur en code HTML contre le contenu du texte. N'effectuez pas de nettoyages diff. Ce diff permet de cartographier des positions de caractères d'une version à l'autre (voir la fonction DIFF_XIDEX). Après cela, on peut appliquer toutes les patchs que l'on veut contre le texte brut, puis cartographier la modification en toute sécurité sur le HTML. La capture avec cette technique est que, bien que le texte puisse être édité librement, les balises HTML sont immuables.

Une autre méthode consiste à marcher sur le HTML et à remplacer chaque étiquette d'ouverture et de fermeture avec un caractère unicode. Vérifiez la spécification Unicode pour une plage qui n'est pas utilisée. Pendant le processus, créez une table de hachage de caractères Unicode aux balises d'origine. Le résultat est un bloc de texte pouvant être corrigé sans crainte d'insérer du texte à l'intérieur d'une étiquette ou de casser la syntaxe d'une étiquette. Il suffit de faire attention lorsque vous reconvertissez le contenu en HTML qu'aucune étiquette de fermeture n'est perdue.

J'ai un hunch que la 2e idée, MAP-HTML-TAGS-TO-UNICODE-ESGISTENTERNERS, pourrait fonctionner mieux qu'on deviné ... surtout si vos balises HTML proviennent d'un ensemble réduit, et si vous le pouvez Effectuez un peu de retouche ouverte / fermée lors de l'affichage du marquage Diffive (StriketHRough / souligné).

Une autre méthode pouvant fonctionner avec un style simple serait supprimer les balises HTML, mais rappelez-vous les index de caractères affectés. Par exemple, "les positions 8-15 sont en gras". Ensuite, effectuez une diff. Enfin, en utilisant l'idée de mappage de position DIFF_XINDEX de la première méthode de Wiki, réinsérez intelligemment des balises HTML pour réappliquer des styles aux gammes survivantes / ajoutées. (C'est-à-dire que si les anciennes positions 8-13 ont survécu, mais sont passées à 20-25, insérez les balises B autour de là.)


7 commentaires

Et qu'en est-il de cela: échappez aux caractères HTML (<,> et &), faites tout le travail diff / patch / fusionner le résultat du résultat. Semble être la solution la plus stable pour moi.


Je pense que vous trouverez que l'approche entraînerait exactement la même production que de ne pas les échapper. L'algorithme de diffusion n'a aucun problème les traiter comme un autre caractère; Le problème est de les garder équilibré et les échappant pas ne résout pas cela.


Je suis passé à travers cela et j'ai fini par créer une bibliothèque de wrapper pour vous aider avec le "travail de présentation" nécessaire pour utiliser diff_match_patch : github.com/arnab/jquery.prettytextDiff


@arnab - FYI Votre démo Jsfiddle ne fonctionne pas dans FF19 / Mac (mais fait dans chrome23 / Mac).


@gojomo: Merci pour la note. Il suffit de vérifier la FF19 sur Mac (OSX 10.8.2) - Travaillé bien. Quelle erreur obtenez-vous (peut-être dans la console)?


@arnab: toujours avoir un problème; OSX / 10.7.3, FF / 19.0 "À ce jour" "sur le canal bêta". Après avoir appuyé sur "DIFF", une erreur dans la console est TypeError: $ (...). PrettyTextDiff n'est pas une fonction http://fiddle.jshell.net/_display/ ligne 38 . (Il existe une avertissement de console antérieure, sur la charge de la page, sur getattributenode () être obsolète, mais cela semble inoffensif.)


Essayez maintenant. Je l'ai mis à jour environ un mois de retour (oublié de mentionner ici).



6
votes

JSDIFFLIB - Bibliothèque et bibliothèque JavaScript Visual Diff. https://github.com/cemerick/jsdifflib

Il y a une démo ici: http://cemerick.github.io/jsdifflib/demo.html