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

我对编码很陌生，所以请温柔一点。我就读的一所大学给了我一个项目。构建一个在线交互式教程，与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);

//初始化ace编辑器
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编辑器
函数showHTML（）{
$（'#return'）.html（htmleditor.getValue（））；
}
函数showHTMLInIFrame（）{
$（'#return'）.html（“”）；
}
htmleditor.on（“输入”，showHtmlInFrame）；
//css编辑器
函数showCss（）{
$（'#return'）.css（csseditor.getValue（））；
}
函数showcsiniframe（）{
$（'#return'）.css（“”）；
}
csseditor.on（“输入”，显示CSSINIFrame）；

我的html附带了所有必需的js文件。任何帮助都将不胜感激，即使你只是给我指出了正确的方向。不过，如果有人能想出解决我所面临问题的办法，请告诉我

问候

---

Phil

构建您的逻辑，这样您就有了两个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);    

函数updateFrame（）{
var html=htmleditor.getValue（）
var css=htmleditor.getValue（）
$（'#return'）.srcdoc=html+css
}
htmleditor.on（“输入”，updateFrame）；
csseditor.on（“输入”，updateFrame）；