如何实时预览一组文件？

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>

如何实时预览一组文件？

How to live preview a set of files?

javascript

live-preview

plunker

adobe-brackets

visual-studio-code