4

我正在制作自己的所见即所得。我有两个按钮：“可视化”和“显示源”。

我有一个包含大量 HTML 代码的 iframe（富文本编辑器）。第一次加载时，它会直观地显示所有元素。按下 Show Source 后，将显示 innerHTML 文本（可视化 html 的）。但是，当按下“可视化”按钮时，如何使 HTML 文本再次可视化？

content.document.body.innerText保存需要可视化的 HTML。（内容 = iframe 的 id）

$('#Visualize').click(function()
{
   // Make HTML visible
});
4

2 回答 2

5

使用您已经拥有的 html 代码并在 div 中显示预览，对吗？只需使用html功能。

$('#Visualize').click(function(){
   $('#myShowDiv').html(content.document.body.innerText);
});
于 2012-11-30T16:38:43.227 回答
1

如果您使用的是 iframe，并且该 iframe 仅用于保存正在编辑的实际页面源，那么您将需要父框架上的变量来保存实际源。我建议将其分开，然后使用以下命令执行切换：

var actualSource = content.document.body.innerHTML;
// just something to initialize it
// You should probably keep it in a global object instead of as a var


$('#Visualize').click(function()
{
   actualSource = content.document.body.innerText;
   content.document.body.innerHTML = "";
   content.document.body.innerHTML= actualSource;
});

我想你有捕获源的方法，但我想你想捕获当时的实际源。我不确定你在用实际的编辑块做什么（它是一个可编辑的 div 吗？它是一个文本区域吗？），但为了执行显示，它应该只是切换 innerHTML 的问题和 innerText 之间的两个设置。真正的收获将是监控受此更改影响的实际控制。

于 2012-11-30T17:02:58.300 回答