Переместить iFrame в DOM с помощью jQuery

Question

Моя общая цель - создать редактор, который я могу создавать с помощью jQuery UI (путем создания пользовательской панели инструментов, использующей интеграционные вызовы), используя TinyMCE.

Допустим, у меня есть редактор TinyMCE на странице.Фактический редактор - это iFrame, содержащийся во множестве ужасного табличного кода, который также находится там, где находится текущая (подлежащая удалению) панель инструментов.Я хочу только iframe внутри div - в идеале избавиться от кода таблицы.

Итак ... Я хочу преобразовать:

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

в

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

До сих пор я пытался использовать:

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

Клонирует iframe, но не содержит внутри него содержимого.

Есть ли способ заставить это работать?

Если нет, могу ли я каким-то образом убрать код таблицы вокруг iFrame?

Если я не могу это сделать, яЯ подумаю, что мне придется сохранить код таблицы.

Answer 1

Не удалось заставить это работать должным образом, поэтому вместо этого избавился от пользовательского интерфейса TinyMCE с небольшим количеством CSS.

Спасибо за все предложения, хотя!

Answer 2

Вы должны сохранить html-узел iframe где-нибудь (например, сам iframe), а затем восстановить этот узел после перемещения iframe:

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);

Код может быть много оптимизирован, но основная идея остается прежней.

Answer 3

Как насчет:

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

Answer 4

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

Попробуйте это ... Он заменяет таблицу внутренним фреймом.