Question

I am looking for a WYSIWYG that will allow me to specify a whitelist of HTML tags that are allowed in the textarea and renders them, whilst discarding anything else. This validation would need to run if the user copies and pastes content in or editing the HTML manually.

Sort of like HTML Purifier but in a Javascript WYSIWYG.

I have played around with CKEditor’s dataProcessor.dataFilter setting but that would need to list every tag to EXCLUDE so its a blacklist rather than a whitelist.

Any ideas?

Edit…

Please don’t simply suggest use {xyz} editor. I am looking for suggestions with code samples showing how to use the suggested editor in this manner.

Answer 1

Using tinyMCE you can have a list of valid elements, invalid elements, and extended valid elements

You can see the code for these and play with the configuration options on tinyMCE’s website by looking at examples

When the form is submitted or the remove formatting button is pressed (as in this example) the validation is ran and pulls out all the non-valid formatting.

You must be careful for this does not ensure that a malicious user will not directly send you non-valid html and try to cause a XSS attack. This means you still need validation on the server side if you intend to serve the html up to users again.