tinyMCE wrap element in a div

Question

Hi all,

I am using tinymce 3.3.6 (in Drupal) and I need a way to highlight multiple paragraphs and wrap them in a new div with a class.

e.g.

<p>bob</p>
<p>bob</p>
<p>bob</p>

will become (after highlighting and doing something)

<div class="accordion">
<p>bob</p>
<p>bob</p>
<p>bob</p>
</div>

At the moment, if I just highlight everything and try and add the class it simply becomes:

<p class="accordion">bob</p>
<p class="accordion">bob</p>
<p class="accordion">bob</p>

Any advice would be much appreciated.

Adi.

Answer 1

You are not allowed to put p-tags inside div-tags because this is not valid xhtml (both tags are block tags). Tinymce will cleanup non-valid code. Choose eigther p or div-tags as tinys's root element (configuration settings, actually it is p-tag). You may alos consider using another kind of tag to put inside the editors root element (i.e spans).

EDIT: You could write your own plugin and fiddle with the dom - wrap all desired p-tags into a div element (with the desired class) and insert it into the editors content.