实时代码编辑器的 ACE 语法突出显示器不起作用

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

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

var textval=e.getValue();

相关内容

最新更新

热门标签：