Question

我对编码很陌生，所以请保持温和。我正在学习一所大学的项目。建立一个在线互动教程，与codecademy等相同的风向标。问题是我没有很多javascript或jquery的经验，因为我还没有被教过。在项目结束时他们想要的是一个在线互动教程，其中包含html和css的实时预览。问题是我不知道如何在没有任何帮助的情况下完成这一切，这就是我在这里的原因。

我一直在进行相当多的研究，并找到了一些帮助我实现这一目标的非常好的前景。他们是ace编辑器和codemirror问题是没有我可以找到帮助我的教程。

我能够让html使用实时预览而不是css。这是我的jquery代码。

//initializing ace editor
var htmleditor = ace.edit("htmleditor");
htmleditor.setTheme("ace/theme/twilight");
htmleditor.session.setMode("ace/mode/html");

var csseditor = ace.edit("csseditor");
csseditor.setTheme("ace/theme/twilight");
csseditor.session.setMode("ace/mode/css");
//html editor
function showHTML() {
    $('#return').html(htmleditor.getValue());
}

function showHTMLInIFrame() {
    $('#return').html("<iframe src=" + "data:text/html," + encodeURIComponent(htmleditor.getValue()) + "></iframe>");
}
htmleditor.on("input", showHTMLInIFrame);

//css editor
function showCss() {
    $('#return').css(csseditor.getValue());
}

function showCssInIFrame() {
    $('#return').css("<iframe src=" + "data:text/css," + encodeURIComponent(csseditor.getValue()) + "></iframe>");
}
csseditor.on("input", showCssInIFrame);

我将所有必需的js文件附加到我的html。任何帮助都会非常感激，即使你只是指着我正确的方向。虽然如果有人能想出解决我遇到的问题的方法，请告诉我。

问候

菲尔

Answer 1

构建您的逻辑，以便您有两个ACE编辑器（您已经完成），并且您将更新一个iframe。将HTML编辑器的结果与CSS编辑器的结果相结合，并将它们分配给单个iframe。

提前创建iframe，并为其指定一个id值。

<iframe id="return"></iframe>

function updateIframe() {
  var html = htmleditor.getValue()  
  var css = htmleditor.getValue()

  $('#return').srcdoc = html + css
}

htmleditor.on("input", updateIframe);
csseditor.on("input", updateIframe);

如何使用ace编辑器制作html和css实时预览

1 个答案: