javascript - HTML Javascript问题在实时代码编辑器中插入脚本标签-6ren

javascript - HTML Javascript问题在实时代码编辑器中插入脚本标签

转载作者：行者123 更新时间：2023-11-30 19:02:33

24

4

我几天前使用 ace 1.2.9 库制作了实时代码编辑器。我在为我的网站运行多个指南时没有遇到任何问题。现在我正在尝试创建这个非常简单和基本的示例。但是当我尝试在文本区域(你想为指南插入文本的地方)写入文本时，studio 代码编译器出现错误，它不会加载。问题是当我添加这一行时:(它在文本区域，不应该影响编辑器代码:

document.getElementById("test").innerHTML = "Hello JavaScript";

代码:

<body onload="ready()">
    <div id="container">
      <div id="editor"></div>
      <iframe id="iframe" frameborder="0"> </iframe>
    </div>
    <script>
      function update() {
        var idoc = document.getElementById("iframe").contentWindow.document;
        idoc.open();
        idoc.write(editor.getValue());
        idoc.close();
      }
      function setupEditor() {
        window.editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/html");
        editor.setValue(

  `  
     <!-- You can test freely     
       with our live code editor. -->

       <html>
<body>

  <h2>Free code wiki</h2>

<p id="test"></p>

<script>
document.getElementById("test").innerHTML = "Hello JavaScript";
</script>

</body>
</html>



`,
          1
        ); //1 = moves cursor to end

        editor.getSession().on("change", function() {
          update();
        });

        editor.focus();

        editor.setOptions({
          fontSize: "16pt",
          showLineNumbers: false,
          showGutter: false,
          vScrollBarAlwaysVisible: true,
          enableBasicAutocompletion: false,
          enableLiveAutocompletion: false
        });

        editor.setShowPrintMargin(false);
        editor.setBehavioursEnabled(false);
      }

      function ready() {
        setupEditor();
        update();
      }
    </script>
  </body>
</html>