TinyMCE: Only allow specific Formatting and HTML Tags

With the declaration of "valid_elements", you can exactly control which HTML tags are allowed and which not. 

Here is an example:

tinymce.init({
  selector: "textarea",
  valid_elements: "p,br,b,i,strong,em",
  toolbar: "bold italic"
});

With this, we are only allowing paragraphs (p), line breaks (br), bold text (b and strong) and italic text (i and em). At the same time, we limit the toolbar to buttons for bold and italic text.

valid_elements: "p,br,b,i,b/strong,i/em"

With using the notation such as "b/strong" or "i/em", we can make TinyMCE to automatically rewrite HTML tags. In this example, "strong" is changed to "b" and "em" to "i".

valid_elements: "p,a[href|target=_blank],div[style]"

Behind simple formatting, we can also adjust which attributes are allowed to be kept. This is interesting for example when defining links. In this example, we are allowing the attributes "href" and "target=_blank" for a-tags and the attribute "style" for divs.

Important: Forbidding HTML tags with TinyMCE does not make user input more secure, as there are many ways to bypass TinyMCE and to send everything you want to the server anyway. So you should always also check the user input on server side.
Last update on 2021-04-06 | Created on 2014-05-06