用于实时代码编辑器的 ACE 语法荧光笔无法正常工作

Question

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

<!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 只渲染到 dom 文本的可见部分，并添加一些不对应任何文本的节点。因此，您需要调用编辑器的 getValue() 方法而不是 document.getElementById('jsEditor').textContent 。在您的示例中，将带有 textContent 的行更改为

var textval=e.getValue();

用于实时代码编辑器的 ACE 语法荧光笔无法正常工作

ACE Syntax highlighter for live code editor not working

html

javascript

iframe

codemirror

ace-editor