I’ve been working away at the online word processor that I’m developing, based on TinyMCE, and struck the problem that, by default, TINYMCE cleans up the HTML code of the entered content.

In my case this is a problem, as I’m trying to make use of standard HTML attributes in order to persist information, and still let the user easily edit that information. For example, I want them to be able to style certain text as being a name of some sort: personal, geographic, organisation, title etc. I then want to be able to key that name with an authorative identifier, but let them continue to work on the content.

For example, I want text to be displayed to the user something like this:
Screenshot of formatted text

But I want the HTML code for this to appear something like this:

<span class="nameWork" title="name-010203">
	Reflections of a Black Woman in a White Man's World
</span>

After a bit of hunting around, I found the answer, which is to use the option to specify extended valid elements when initialising the instance of the editor:

tinyMCE.init({
...
extended_valid_elements : "span[class|title]",
...
});

Leave a Reply