find a location for property in a new city

Wednesday, 3 November 2010

Allow self closing tags in TinyMCE

I needed to make a tag self-close when using TinyMCE. It wouldn't allow it though, it kept opening them up again for me even after I edited them in HTML. How difficult can it be to add a tag to this allow self-closing tags list.

Answer: Not very. Even still though it took me a ridiculous amount of time to find out how to allow a new self closing tag. So I thought I'd share my discovery in case anyone else is struggling to find the answer.

I was trying to type in <source src="myVideo.m4v" /> but TinyMCE kept changing it to <source src="myVideo.m4v" ></source>.

Closed setting allows new self-closing tags

Turns out there is a little know closed setting you can set on tinyMCEs init method. I added my source tag to the list like so:
closed: /^(br|hr|input|meta|img|link|param|area|source)$/

Now any source tags are automatically self closing.

Notice I added a load more like img. The others are there by default in the core TinyMCE code so if I were to just put in source, the others (like img) would stop being self-closing. Not cool.

Follow britishdev on Twitter