TinyMCE Remove DIVs with a specific class

0
votes

I would like to remove a div from the TinyMCE editor content that has a specific class.

In the ideal world I'd like to be able to do this via the valid_elements option but I don't know if it's achievable.

Here is a sample of editor content:

<div class="content">
Some html content here
<div class="anotherclass"></div>
</div>

I would like the 

<div class="content">

stripping out so the editor will only show this:

Some html content here
<div class="anotherclass"></div>

Cheers guys.

2
javascripthtmltinymce

2 Answers

0
votes

First get the innerHTML of the div, and then append that content to the div, after which you can remove it.

In jQuery:

var contentHtml = $(".content").html();
$(".content").after(contentHtml);
$(".content").remove();

Of course, if you have multiple divs with these classes its more complicated because then you would have to work with parents etc.

0
votes

Problem here will that by default your editor will have a root_block element (in your case div) and all content gets wrapped inside that kind of root_block element. This is done for styling purposes, but can be deactivated using this initialization params

force_p_newlines : false,
force_br_newlines : false,
convert_newlines_to_brs : false,
remove_linebreaks : true,

Once that is done you can use this code to easily get rid tof your divs.

var $elements_to_be_removed = $(".content");
$elements_to_be_removed.each(function(index) {
    $(this).replaceWith(this.innerHTML);
});