javascript - Ace 编辑器未在编辑器中显示 HTML 代码

Question

Ace 编辑器未在编辑器中显示 HTML 代码，如 image 中所示，但 JavaScript 和 CSS 没问题。我使用的代码是

var html = ace.edit("htmlEditor");
var css = ace.edit("cssEditor");
var js = ace.edit("jsEditor");

html.setTheme("ace/theme/xcode");
css.setTheme("ace/theme/xcode");
js.setTheme("ace/theme/xcode");

html.session.setMode("ace/mode/html");
css.session.setMode("ace/mode/css");
js.session.setMode("ace/mode/javascript");

Answer 1

改为创建您自己的 html 代码编辑器。

HTML

<textarea oninput="run(this.value)"></textarea>
<iframe id="preview" frameborder="0"></iframe>

JavaScript

function run(code) {
  document.getElementById("preview").contentDocument.body.innerHTML = code;
}

此编辑器在线。此外，如果您需要调试器，请使用它。

JavaScript

function debug(code) {
  try {
    new Function(code);
  } catch(e) {
    alert(e)
  }
}

当没有错误时，它不会警告但会运行结果。否则，它会提示错误。