如何使用ace编辑器制作HTML和CSS的实时预览

how to use ace editor to make a html and css live preview

本文关键字：CSS 实时 HTML ace 何使用 编辑器      更新时间：2023-09-26

我是很新的编码，所以请温柔。我就读的一所大学给了我一个项目。建立一个在线互动教程，与codecademy和类似的网站非常相似。问题是我对javascript或jquery没有太多的经验，因为我还没有学过它们。在项目结束时，他们想要的是一个在线交互式教程，其中包含HTML和css的实时预览。问题是我不知道如何在没有任何帮助的情况下做这一切，这就是我来这里的原因。

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

我已经能够得到一个实时预览的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。任何帮助将是非常感激的，即使你只是指出我在正确的方向。如果有人能想出一个解决我所面临的问题的方法，请让我知道。

对

菲尔

构造您的逻辑，这样您就有两个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);
相关文章：