Déplacer iFrame dans le DOM en utilisant jQuery

Question

Mon but général est de créer un éditeur que je peux habiller en utilisant jQuery UI (en créant une barre d'outils personnalisée qui utilise des appels d'intégration), en utilisant TinyMCE.

Disons que j'ai un éditeur TinyMCE sur une page. L'éditeur réel est un iFrame contenu dans beaucoup de code de table horrible, qui est également où la barre d'outils actuelle (à mettre au rebut) est. Je veux juste l'iframe à l'intérieur d'un div - idéalement se débarrasser du code de la table.

Alors ... Je veux transformer:

<table> 
    <tr> 
     <td><iframe id="xyz"></iframe></td> 
    </tr> 
</table> 

dans

<div id="test"> 
    <iframe id="xyz"></iframe> 
</div> 

Jusqu'à présent, je l'ai essayé d'utiliser:

$('#xyz').clone(true).appendTo('#test'); 

qui clone l'iframe, mais pas de contenu à l'intérieur.

Existe-t-il un moyen de faire fonctionner ce système?

Sinon, puis-je supprimer le code de la table autour de l'iFrame?

Si je ne peux pas faire cela, je pense que je vais devoir garder le code de la table.

Answer 1

Impossible de le faire fonctionner correctement, donc au lieu débarrassé de l'interface utilisateur TinyMCE avec un peu de CSS.

Merci pour toutes les suggestions si!

Answer 2

$('table').replaceWith($('iframe:first')); 

Essayez cela ... Il remplace la table par l'iframe interne.

Answer 3

Que diriez-vous:

// http://api.jquery.com/replaceWith/ 
$('table:has(#xyz)').replaceWith($('#xyz')); 
// http://api.jquery.com/wrap/ 
$('#xyz').wrap('<div id="test" />'); 

Answer 4

vous devez enregistrer le nœud html iframe quelque part (par exemple lui-même iframe), puis restaurer ce noeud après iframe mouvement:

iframe.htmlNode = iframe.contentDocument.getElementsByTagName('html')[0]; 
// moving iframe here ...... 

// restoring html node 
var html = iframe.contentDocument.documentElement; 
html.parentNode.removeChild(html); 
iframe.contentDocument.appendChild(iframe.htmlNode); 

Le code peut être optimisé beaucoup, mais l'idée principale reste le même.