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

Question

我对编码很陌生，所以请保持温和。我正在学习的一所大学给了我一个元素。建立在线交互式教程，与codecademy之类的风向标非常相似。问题是我没有太多使用 javascript 或 jquery 的经验，因为我还没有学过它们。在元素结束时，他们想要的是一个在线交互式教程，其中包含 html 和 css 的实时预览。问题是我不知道如何在没有任何帮助的情况下完成这一切，这就是我来这里的原因。

我一直在做大量的研究，并发现了一些非常好的前景来帮助我实现这一目标。他们是 ace editor 和 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);