Question

I am creating plugin for TinyMCE and I need to wrap existing elem (node) with new one.

For example, if I have paragraph:

<p>hello</p>

after command I need:

<div id="someid"><p>hello</p></div>

I tried below but it doesn;t wrap paragraphs, only theirs body, for example:

tinyMCEPopup.editor.execCommand('mceReplaceContent',true,'<div id="someid">{$selection}</div>')

creates:

<p><div id="someid">hello</div></p>

What is the easiest way to do it?

Update:

Finaly I decided to use below construction (no jQuery):

// Get instance of the editor       
var ed = tinyMCEPopup.editor;

// we are collecting <p> or other default tag to cover it       
var node = tinyMCEPopup.editor.selection.getNode();

// create new dom objects   
var newNode =  ed.dom.create('div', {'class' : 'accordionContent'}); 
var newHNode =  ed.dom.create('h2', {'class' : 'accordionTitle'},document.forms[0].title.value);

// dom modifications
ed.dom.add(node.parentNode, newHNode);
ed.dom.add(node.parentNode, newNode);
newNode.appendChild(node);

Answer 1

If you are able to use jQuery in your application there is a wrap() function. If you had

<div id="someid">hello</div>

Then you could do:

$('#someid').wrap('<p />')

Gives you:

<p><div id="someid">hello</div></p>

Update:

Have read your question again and I think you may need wrapInner() instead.