TinyMCE Cleans certain divs

Question

I have a page and want to use TinyMCE to edit certain elements on the page. When I am trying to edit the following elements, the actual content loaded inside tinyMCE is as present in column 2

Original : As loaded in MCE
<dd>1234<span></span></dd> : 1234<span></span>
<tr><td><label>A</label></td><td>B</td></tr> : <label>A</label>B

I understand there is some html validation going on which checks the parent child element relationships (e.g. tr should come only if there is table as parent). Is there a way I can tell tinyMCE to stop doing this and allow me to edit tr elements directly without editing the complete table elements. i.e. I want to stop tinyMCE to make any change in the loaded HTML irrespective its valid or not.

Also, I tried the verify_html and valid_elements settings but seems not helping here

Thanks

Answer 1

You got two options here

1. You use the cleanup: false, tinymce init setting which will disable the html checking

or you can use the better option

2.. and define which elements and childelements the editor should accept as valid

In your case your valid_elements do niot need to get updated, cause tr, td and label are already valid elements by default (but you may define them invalid if you like). What you will need to do is to add them as valid children to the valid_children setting. If you want to define tr tags as valid child elements of p-tags and other elements you will need to set something like this

    valid_children: "body[p|ol|ul]" +
    ",p[a|span|b|i|u|sup|sub|img|hr|#text|tr|td|label]" +
    ",span[a|b|i|u|sup|sub|img|#text|tr|td|label]" +
    ",a[span|b|i|u|sup|sub|img|#text|tr|td|label]" +
    ",b[span|a|i|u|sup|sub|img|#text|tr|td|label]" +
    ",i[span|a|b|u|sup|sub|img|#text|tr|td|label]" +
    ",sup[span|a|i|b|u|sub|img|#text|tr|td|label]" +
    ",sub[span|a|i|b|u|sup|img|#text|tr|td|label]" +
    ",li[span|a|b|i|u|sup|sub|img|ol|ul|#text]" +
    ",ol[li]" +
    ",ul[li]",  

Answer 2

We use the editor to define email templates with our own customized language and tokens that are replaced when the email is sent.

None of the suggested solutions worked for us because we sometimes mix our custom language with html and it keeps modifying it from the source code we were putting in, so we worked around it by surrounding the invalid html with comments and add a special character sequence directly inside the tags to know to remove these special comments later on.

So the special tags might look like: <!--~~ Invalid markup to not mess with ~~-->

You can then remove the special tags <!--~~ AND ~~--> when the content is to be used or rendered.

The drawback is that the stuff between the comments will not show in the editor (or on the page until the special comment tags are removed).