CODEWITHSUNDEEP
javascriptdomtinymcedtd
Issac Kelly
Issac Kelly

Reputation: 6359

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

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.

Upvotes: 0

Views: 1004

Answers (2)

hcalves
hcalves

Reputation: 2294

Use mceInsertContent command instead, and don't use self-closing tags:

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

Upvotes: 0

Tinku
Tinku

Reputation: 1608

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

Upvotes: 1

Related Questions