When writing a new post, I usually use the text view in TinyMCE. Whenever I need to paste some code example, I thus need to escape the pasted text to HTML entities so that it’s not interpreted as HTML code but to have it displayed properly. When just pasting a line of HTML it’s not a big deal but when I paste many lines it’s quite some work.

A workaround is to switch to the Visual view past the code and then switch back to the text view to add the <pre> tag. But it’s not very practical. Ideally, I would just need to open a web page in a separate browser window where I could have the code escaped.

Well, it’s exactly what I’ve implemented tonight. I’ve created a web page with two textareas. You can paste some code in the first textarea. The tool will then use JavaScript to escape the text and show it in the second readonly textarea. It escapes the following:

• ", ', &, < and > to respectively &quot;, &apos;, &amp;, &lt; and &gt;
• all codes between 160 and 255 with the corresponding HTML entity
• all codes above 127 which haven’t yet been escaped to an hexadecimal notation e.g. &#x83;

Additionally to save some more interactions, I’ve added a button to copy the escaped text to the clipboard using the ZeroClipboard library. Since the latest version of the library seems to not work properly on my site, I ended up using the zclip jQuery plugin which in turn uses ZeroClipboard. In case, you want to do the same, note that the link to the swf file on the zclip library refers to google code where ZeroClipboard is not available anymore because it moved to the excellent GitHub. Luckily, I had an older version of zclip with the swf file in another project and could thus reuse it.

Since the whole code is running on the client using JavaScript, you can have a look at the source code by using the corresponding function of your favorite browser.

In the future, I plan to improve the page to make it look nicer and to add some options as to what you want to escape. For instance, you do not need to escape apostrophes and quotes if you just paste the code in an HTML tag (but you do need it if you paste it to an attribute). Also, you may want to also escape spaces and new lines which is currently not supported.

The tool can be found online at Online HTML Escape Tool.