Question

所以我正在尝试构建一个代码编辑器，在iframe中显示html的输出。但是有一些麻烦。我之前使用过codemirror我正在使用ACE，但这里出现了问题，因为它一直显示我＆＃34; xxxxxx＆＃34;和数字。使用它的正确方法是什么？

<!DOCTYPE html>
<html>

  <head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
   <style>
      #jsEditor{height:300px;}
   </style>
  </head>

  <body>  
     <div id="jsEditor"></div>
     <iframe id="frame"></iframe>
     <button onclick="refresh()">Click</button>
     <script type="text/javascript">
         var e=ace.edit("jsEditor");
         e.getSession().setMode("ace/mode/html");
         e.setTheme("ace/theme/xcode");
         e.getSession().setTabSize(2);
         e.renderer.setShowGutter(false);

         function refresh(){
            var textval=document.getElementById('jsEditor').textContent;
            document.getElementById('frame').srcdoc=textval;
          }     
     </script>
  </body>

</html>

[这是我得到的输出] [2]

https://jsfiddle.net/fc0cjo9z/

Answer 1

Ace渲染仅显示文本的可见部分，并添加一些与任何文本不对应的节点。因此，您需要调用编辑器的document.getElementById('jsEditor').textContent方法而不是getValue()。在您的示例中，将textContent更改为

var textval=e.getValue();

用于实时代码编辑器的ACE语法高亮显示器无法正常工作

1 个答案: