Clean markup is important. If you allow a page to include sloppy markup it will switch from rendering in "Standards Compliance Mode" to "Quirks Mode" which will apply different rules to how the layout and style works. It makes for an unpredictable result and can be a major headache. One way to introduce sloppy markup into a website is making use of rich editors that spit out HTML, such as the ASP.NET Rich Text Editor Control on CodePlex. There are others like the RichTextBox, FreeTextBox and FckEditor. Each of these editors are ASP.NET controls while you can get a purely JavaScript solution using TinyMCE which is used in BlogEngine.NET. Some of these solutions do create decent markup, but in the case of the ASP.NET Rich Editor Control, it still creates HTML 3.2 instead of XHTML 1.0 Transitional which has become the de facto standard since ASP.NET 2.0. (XHTML?) It still includes FONT tags and other older syntax which has been deprecated. This is where Tidy comes in.
The Tidy library has been around for years now and there are ports to multiple platforms. For Windows it is available as a COM assembly. Unfortunately that is not ideal for working with .NET, but there is a good wrapper for it that still requires the COM assembly to be registered before it can be used. Registration is not difficult, as explained on the project website, but doing it manually every time can be a hassle. To avoid the hassle I created installer along with a simple helper class.
With Tidy for .NET you simply run the installer on any machine that will be using the Tidy library. The installer will copy the COM assembly, named TidyATL.dll, to the installation folder and register it for you. In addition to placing Tidy functionality on the machine, it also adds an MSBuild Task to make it easy to automate if you have a need for that. Along with the project I have created a sample website that uses the TinyMCE editor as a demo for using the MarkupCleaner
class that I created to wrap the Tidy library. When the PostBack event occurs it passes the value from the TextBox
to the cleaner and displays the result inside of a PlaceHolder
. It also shows the unmodified version in another PlaceHolder
for comparison. You can use this sample website to try out how well it works with your editor of choice as well as different Tidy settings. The following code is all you will need.
You can get everything with the following links:
And if you find that Tidy for .NET is useful, you may also be interested in Packer for .NET which can be used to compress JavaScript using either Packer or JSMin. It will help you reduce the footprint of pages that are making use of your custom JavaScript.