Question

我的总体目标是使用TinyMCE创建一个可以使用jQuery UI（通过创建使用集成调用的自定义工具栏）进行修饰的编辑器。

假设我在页面上有一个TinyMCE编辑器。实际的编辑器是一个包含在很多可怕的表代码中的iFrame，它也是当前（要废弃的）工具栏所在的位置。我只想在div中使用iframe - 理想情况下摆脱表格代码。

所以...我想改造：

<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

无法正常工作，所以用一点CSS摆脱了TinyMCE UI。

感谢所有的建议！

Answer 2

怎么样：

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

Answer 3

你必须在某处保存iframe的html节点（例如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 4

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

试试......用内部iframe替换表。

使用jQuery在DOM中移动iFrame

4 个答案: