王牌代码编辑器的问题

我已经成功创建了一个Ace编辑器，但最近我正在创建一个名为CodeProjects的网站，并且我想放置一个Ace编辑器。每当我尝试时，它只显示文本function foo(items) { var x = "All this is syntax highlighted"; return x; }。在http://ace.c9.io/#nav=embedding&api=ace的页面，它说你只需要代码：王牌代码编辑器的问题

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>ACE in Action</title> 
     <style type="text/css" media="screen"> 
      #editor { 
       position: absolute; 
       top: 0; 
       right: 0; 
       bottom: 0; 
       left: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="editor">function foo(items) { 
      var x = "All this is syntax highlighted"; 
      return x; 
      } 
     </div> 
     <script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> 
     <script> 
      var editor = ace.edit("editor"); 
      editor.setTheme("ace/theme/monokai"); 
      editor.getSession().setMode("ace/mode/javascript"); 
     </script> 
    </body>

但是当我试图把它嵌入到（或者甚至只是做编辑，不是网站），再次，它只能说明function foo(items) { var x = "All this is syntax highlighted"; return x; }

有什么建议吗？

来源

2013-07-28 Joe P.

它也说要将文件复制到您的项目。如果你不想这样做，从CDN

<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ace.js" 
      type="text/javascript" charset="utf-8"></script>

看到http://jsbin.com/ojijeb/165/edit

来源

2013-07-29 08:00:28

在我的网站上，它只显示为一行。 –

你使用ie8吗？在这种情况下尝试把代码预先而不是div http://jsbin.com/ojijeb/172/edit –

不，我使用铬最新更新 –

包括脚本，你需要把内容外编辑器的div [或获取使用AJAX页面加载内容]。无论哪种方式，您然后用JavaScript加载内容到编辑器：editor.setValue("hello world");。

要设置编辑器的高度，请调整它所在的div的大小，然后调用编辑器的resize方法。

var div = document.getElementById('editor');  
div.style.height = some_multiple_of_the_line_height_for_tidiness; 
editor.resize();

来源

2014-05-25 18:45:06

根据我的经验，您需要将div更改为pre。只需用下面的方式使用pre而不是div即可解决您的问题。

<pre id="editor" > 
</pre>

来源

2017-01-13 15:14:03

王牌代码编辑器的问题

回答

相关问题