如何实时预览一组文件？

Question

我想建立一个像plunker这样的简单的在线编辑器。有人知道如何在上传几个文件(.html、.css、.js、.json)后完成实时预览吗？

以JSBin为例，只有1个html文本，1个css文本和1个js文本，所以很简单:我们只需要从这些文本构建一个完整的html文件并使用Document.write()。

然而，像plunker，brackets，vscode这样的编辑器如何做实时预览呢？他们是自己构建一个完整的文件，还是使用一些第三方工具？

Answer 1

实时预览非常简单。只需将页面上某个区域的HTML替换为用户提供的HTML即可。在实践中，出于安全目的，您可能希望在沙箱iframe中执行此操作。

下面的代码片段展示了如何实现这一点，全部用JavaScript编写。尝试运行代码片段并在框中键入。

​

function doLivePreview() {
  $("#output").html($("#source").val());
}

$(function() {
  doLivePreview();
  $("#source").on("input", doLivePreview);
});

#source {
  float: left;
}

#output {
  float: left;
  border: 1px solid #AAA;
  margin-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="source" cols="50" rows="8">
Type to see a live preview
<br/>
<a href="https://www.google.com">Google<a>
</textarea>
<div id="output">
</div>

​