Как живой предварительный просмотр набора файлов?

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>