1

之前成功创建了一个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; }

有什么建议么？

4

3 回答 3

1

它还说将文件复制到您的项目中。如果您不想这样做，请包含来自 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-29T08:00:28.090 回答
0

您需要将内容放在编辑器 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-25T18:45:06.283 回答
0

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

<pre id="editor" >
</pre>
于 2017-01-13T15:14:03.287 回答