Ace 代码编辑器出现问题答案

【问题标题】：Trouble with Ace code editorAce 代码编辑器出现问题
【发布时间】：2013-07-28 17:05:29
【问题描述】：

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

有什么建议吗？

【问题讨论】：

标签： javascript ace-editor

【解决方案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

【讨论】：

你用的是ie8吗？在这种情况下，尝试将代码放在 pre 而不是 div jsbin.com/ojijeb/172/edit
好的，您的问题没有提供足够的信息来查看您网站上的问题。它在 jsbin 上运行良好，所以问题出在您网站的某个地方。
我有点厌倦了编码，所以我使用 Weebly 来制作我的网站。我尝试使用嵌入代码选项来使用它，但是当我添加height: 500px 时，它仍然只显示为一行。
也许我应该把它放在 iFrame 中？
如果你不知道问题出在哪里，也许你至少应该展示一下演示它的页面？

【解决方案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();

【讨论】：

【解决方案3】：

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

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

【讨论】：