用于实时代码编辑器的 ACE 语法荧光笔不起作用答案

【问题标题】：ACE Syntax highlighter for live code editor not working用于实时代码编辑器的 ACE 语法荧光笔不起作用
【发布时间】：2018-01-15 03:51:58
【问题描述】：

所以我正在尝试构建一个代码编辑器，它在 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/

【问题讨论】：

标签： javascript html iframe ace-editor codemirror

【解决方案1】：

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

var textval=e.getValue();

【讨论】：