Question

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

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

content.document.body.innerText包含需要可视化的HTML。（content = iframe的id）

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

Answer 1

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

$('#Visualize').click(function(){
   $('#myShowDiv').html(content.document.body.innerText);
});

Answer 2

如果您正在使用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。真正的问题是监控受此变化影响的实际控制措施。

在Iframe中显示HTML

2 个答案: