时间戳

首页 > 解决方案 > Document.write 和 ace 编辑器

ace-editor - Document.write 和 ace 编辑器

问题描述

我尝试在文档重写引擎中使用 Ace 编辑器。ace 编辑器如下所示：

在此处输入图像描述

运行document.write基本上重写页面后，我得到以下信息，但在 javascript 控制台上没有错误：

在此处输入图像描述

我无法解释为什么我需要 document.write，我只是想找到一种方法来完成这项工作。看起来 ace 在页面重新加载后会自行中断。

这是最小复制示例：

<html>
  <head>
    <script>
      function loadAceEditor() {
        var aceeditor = ace.edit("aceeditor");
        aceeditor.setValue(document.getElementById("aceeditor").getAttribute("initdata"));
      }
    </script>
    <script id="acescript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js" async></script>
  </head>
  <body>
    <div id="aceeditor" style="width:100%;height:100%" initdata="test {}"></div>
    <script>
    onAceLoaded = (delay) => () => {
      if(typeof ace != "undefined" && document.querySelector("#aceeditor")) {
        loadAceEditor();
        setTimeout(() => {
          document.open();
          document.write(`
<html>
  <head>
  </head>
  <body>
    <div id="aceeditor" initdata="testended {}"></div>
    <script>
    onAceLoaded = (delay) => () => {
      if(typeof ace != "undefined") {
        loadAceEditor();
      } else {
        setTimeout(onAceLoaded(delay * 2), delay);
      }
    }
    onAceLoaded(1)();
    </${"script"}>
  </body>
</html>`);
          document.close();
        }, 3000)

      } else {
        setTimeout(onAceLoaded(delay * 2), delay);
      }
    }
    onAceLoaded(1)();
    </script>
  </body>
</html>

编辑

document.write这与加载 ace.js 后调用的事实有关。

标签： ace-editordocument.write

解决方案

好的，实际上，王牌编辑器正在添加以下内容

<style id="ace_editor.css">...</style>

在 HEAD 第一次加载，而不是第二次。重新插入这个元素就成功了。

推荐阅读