Question

我想构建一个简单的在线编辑器，如plunker。一旦上传了多个文件（constructor() { super(); //init this.setState({oio : {}}); }，.html，.css，.js），有没有人知道如何完成实时预览？

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

但是，.json，plunker，brackets等编辑如何进行实时预览？他们是自己构建一个完整的文件还是使用某些第三方工具？

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>

如何实时预览一组文件？

1 个答案: