How can I add an (otherwise) invalid HTML element into TinyMCE.

Question

My HTML contains elements like this, because it uses inlines from django-basic-apps.

<inline type="myapp.mymodel" id="4" />

I'm trying to use tinymce to insert one of these into the DOM. On the frontend of the site, these are processed into good code.

In tinyMCE I've added the config:

extend_valid_elements: 'inline[id|ids|type|filter|class|template]',

But anytime I try to insert via:

tinyMCE.execCommand('mceInsertRawHtml',false,'<inline type="myapp.mymodel" id="4" />');

nothing happens,

And if I do:

tinyMCE.activeEditor.getContent()

TinyMCE removes any <inline elements that are in my code.

Furthermore, I would like these elements to display in the tinyMCE via CSS or something, but I'll probably have to hack the DTD.

If that doesn't work a possible solution that I've thought of would be to pre-render the content to something that IS valid:

And then before save, convert that back to what it should be.

Please provide any suggestions for things I should look into.

Answer 1

In the source code of tinymce tiny_mce_src.js search for the string valid_elements and add your elements and attributes directly there.