如何使用ace编辑器进行html和css实时预览答案

【问题标题】：how to use ace editor to make a html and css live preview如何使用ace编辑器进行html和css实时预览
【发布时间】：2016-01-20 15:09:36
【问题描述】：

我对编码很陌生，所以请保持温和。我正在学习的一所大学给了我一个项目。建立一个在线互动教程，与 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 中。任何帮助都将不胜感激，即使您只是为我指明了正确的方向。不过如果有人能提出解决我面临的问题的方法，请告诉我。

问候

菲尔

【问题讨论】：

标签： javascript jquery html css ace-editor

【解决方案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);

【讨论】：