Many web applications (such as this blog) allow users to enter HTML as a comment. For security reasons, the set of allowed tags is tightly constrained by logic running on the server. Because of this, it’s helpful to provide a preview of what the comment will look like as the user is typing the comment.
That’s exactly what my live preview jQuery plugin does.
See it in action
All you need for the HTML is an input, typically a
TEXTAREA and an element to use as the preview, typically a
And the following script demonstrates one way to hook up the preview to the textarea.
allowedTags: ['p', 'strong', 'br', 'em', 'strike'],
One thing that’s different between this implementation and others I’ve seen is you can specify a set of allowed tags. When typing in the textbox, the preview will render any tags in that list. If the user types in tags which are not in that list, the preview will HTML encode the tags.
Keep in mind that this plugin is for previewing what comments will look like and should not be used as validation! The preview might not exactly match your server-side logic.
Also for fun, I’m hosting the source code on GitHub as a way to force myself to learn what all the fuss is about GIT.
Thanks to Bohdan Zograf, this blog post is also available in Belarusian.