Question

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

有什么建议吗？

Answer 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

Answer 2

您需要将编辑器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();

Answer 3

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

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

Ace代码编辑器有问题

3 个答案: