A new compare option is available for Episerver 11 which gives editors the ability to visually compare two pieces of content as shown in the example below:

In the example above the text changes are highlighted with appropriate red/green highlights. When a text change has been made it means its easy to spot that has been changed quickly.

To access the new compare option editors can select the new "Visual comparison" option in the compare menu:

Getting the visual comparison tool for Episerver

The package is open source and requires Episerver 11. It is available as a Nuget package. The source code is available on Github.

Seeing the visual comparison tool for Episerver in action

When changing page content all changes are shown up, including image updates. Old images are overlayed with a red hash and new ones get a green border:

Its also possible to diff blocks:

When comparing any media editors are currently shown a message that says the files are different.

Credits and contribution

A lot of the Dojo work can attributed to Grzegorz Wiecheć and his awesome blog on comparing properties with markup in Episerver. The original version by Grzegorz used some legacy Episerver code for the diff and targeted an older version of Episerver. In this updated version the compare/diff itself is performed using htmldiff.net by Rohland de Charmoy. Also thanks to Rob Stoves for developing the css for highlighting the content comparison view.

If you spot an issue please submit the issue on on Github or submit a pull request. It's had limited testing so I expect it to evolve as more uses/builds are tried. Similarly if you want to improve the tool feel free to send me a pull request.

Word of caution

This add-on overrides core some Episerver UI components involved in showing compare options to editors. Every effort will be made to ensure this package stays compatible with the latest versions of the Episerver UI. But it's something to bear in mind (and test) when upgrading to the latest versions of Episerver.

Comments

Recommendations for you