javascript - objects - tooltip fullcalendar
¿Alguien tiene un algoritmo diff para HTML renderizado? (12)
¿Qué pasa con DaisyDiff (las DaisyDiff DaisyDiff y PHP están disponibles).
Las siguientes características son realmente agradables:
- Funciona con HTML mal formado que se puede encontrar "en la naturaleza".
- El diffing es más especializado en HTML que el árbol XML. Cambiar parte de un nodo de texto no hará que se cambie todo el nodo.
- Además de la diferencia visual predeterminada, la fuente HTML se puede diferir de forma coherente.
- Proporciona descripciones fáciles de entender de los cambios.
- La GUI predeterminada permite una fácil exploración de las modificaciones a través de atajos de teclado y enlaces.
Estoy interesado en ver un buen algoritmo de diferencias, posiblemente en Javascript, para representar una diferencia lado a lado de dos páginas HTML. La idea sería que la diferencia mostraría las diferencias del HTML renderizado .
Para aclarar, quiero poder ver las diferencias de lado a lado como salida representada. Entonces, si borro un párrafo, la vista de lado a lado sabría separar las cosas correctamente.
@Josh exactamente. Aunque tal vez mostraría el texto borrado en rojo o algo así. La idea es que si uso un editor WYSIWYG para mi contenido HTML, no quiero tener que cambiar a HTML para hacer diffs. Quiero hacerlo con dos editores WYSIWYG uno al lado del otro, tal vez. O al menos mostrar las diferencias lado a lado en un asunto fácil para el usuario final.
Considere usar la salida de enlaces o lince para renderizar una versión de solo texto del html, y luego diferir eso.
Creo que una buena forma de hacerlo es renderizar el HTML en una imagen y luego usar alguna herramienta de diferencias que pueda comparar imágenes para detectar las diferencias.
Durante el fin de semana publiqué un nuevo proyecto en codeplex que implementa un algoritmo de diferencia de HTML en C #. El algoritmo original fue escrito en Ruby. Entiendo que estabas buscando una implementación de JavaScript, quizás tener una disponible en C # con el código fuente podría ayudarte a portar el algoritmo. Aquí está el enlace si está interesado: htmldiff.codeplex.com . Puedes leer más sobre esto here .
ACTUALIZACIÓN: Esta biblioteca se ha movido a GitHub .
Entonces, esperas
<font face="Arial">Hi Mom</font>
y
<span style="font-family:Arial;">Hi Mom</span>
ser considerado lo mismo?
La salida depende en gran medida del agente de usuario. Como sugiere Ionut Anghelcovici , haz una imagen. Haga uno por cada navegador que le interese.
Hay otro buen truco que puede usar para mejorar significativamente el aspecto de una diferencia HTML procesada. Aunque esto no resuelve completamente el problema inicial, supondrá una gran diferencia en la apariencia de los diffs de HTML renderizados.
El HTML renderizado lado a lado hará que sea muy difícil que su diff se alinee verticalmente. La alineación vertical es crucial para comparar diferencias de lado a lado. Para mejorar la alineación vertical de un diff lado a lado, puede insertar elementos HTML invisibles en cada versión del diff en "puntos de control" donde el diff debe estar alineado verticalmente. Luego puede usar un poco de JavaScript del lado del cliente para agregar espacio vertical alrededor del punto de control hasta que los lados se alineen verticalmente.
Explicado en un poco más de detalle:
Si desea utilizar esta técnica, ejecute su algoritmo diff e inserte un montón de visibility:hidden <span> visibility:hidden o <div> s diminutos donde coincidan sus versiones una al lado de la otra, de acuerdo con la diferencia. A continuación, ejecute JavaScript que encuentre cada punto de control (y su vecino lado a lado) y agregue espaciado vertical al punto de control que está más arriba (menos profundo) en la página. Ahora su diferencia de HTML renderizado estará verticalmente alineada hasta ese punto de control, y puede continuar reparando la alineación vertical en el resto de su página contigua.
Para diferencias más pequeñas, es posible que pueda hacer una diferencia de texto normal, y luego analizar las piezas faltantes o insertadas para ver cómo resolverlas, pero para cualquier diferencia mayor, va a ser muy difícil hacerlo.
Por ejemplo, ¿cómo detectaría y mostraría que una imagen alineada a la izquierda (flotante a la izquierda de un párrafo de texto) se ha alineado repentinamente a la derecha?
Si es XHTML (que asume mucho de mi parte), ¿sería útil el Xml Diff Patch Toolkit? http://msdn.microsoft.com/en-us/library/aa302294.aspx
Si estaba trabajando con Java y XHTML, XMLUnit permite comparar dos documentos XML a través de la clase org.custommonkey.xmlunit.DetailedDiff :
Compara y describe todas las diferencias entre dos documentos XML. La comparación de documentos no se detiene una vez que se encuentra la primera diferencia irrecuperable, a diferencia de la clase Diff.
Terminé necesitando algo similar hace un tiempo. Para que el HTML se alinee de lado a lado, puede usar dos iFrames, pero luego tendrá que unir su desplazamiento mediante javascript mientras se desplaza (si permite el desplazamiento).
Sin embargo, para ver la diferencia, lo más probable es que desee usar la biblioteca de otra persona. Utilicé DaisyDiff , una biblioteca de Java, para un proyecto similar en el que mi cliente estaba contento de ver una sola representación en HTML del contenido con "cambios de seguimiento" de MS Word, como el marcado.
HTH
Usar un texto diferente se romperá en documentos no triviales. Dependiendo de lo que piense que es intuitivo, XML difiere probablemente genere diferencias que no son muy buenas para el texto con marcado. AFAIK, DaisyDiff es la única biblioteca especializada en HTML. Funciona muy bien para un subconjunto de HTML.
Utilice el modo de marcado de Pretty Diff para HTML. Está escrito completamente en JavaScript.