首次实施和使用ace

时间:2012-04-18 20:37:32

标签: javascript ace-editor

我是第一次在我的网站上实现ace,我有一些noob问题。我只编程了大约一年,所以请耐心等待。

我已从https://github.com/ajaxorg/ace下载了代码。我假设(可能是错的)我需要的代码位于/ lib / ace /所以我将ace文件夹复制到我的开发环境中的/ lib / js /。我按照github wiki上的说明导入了ace.js.

   <script type="text/javascript" src="lib/js/ace/ace.js" charset="utf-8"></script>

我也有我的HTML代码:

<script>
 window.onload = function() {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/twilight");

        var JavaScriptMode = require("ace/mode/javascript").Mode;
        editor.getSession().setMode(new JavaScriptMode())
    };
</script>
<div id="editor"></div>

CSS:

   #editor {  
        width: 800px;
        height: 690px;
    }

Firebug告诉我ace未定义我声明变量“editor”的位置,并且还给出了这个输出:

missing variable name
const function (require, exports, module) {

来自ace.js.所以我错过了让这个基本实现工作的东西。

4 个答案:

答案 0 :(得分:7)

您下载了需要require.js的来源。

您应该从https://github.com/ajaxorg/ace-builds下载其中一个版本 无需额外要求即可开始使用。

答案 1 :(得分:2)

你必须定位你的编辑器div,使用“position:relative;”或“位置:绝对;”在你的CSS中。

答案 2 :(得分:0)

您是否尝试删除了window.load操作?

<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/twilight");
</script>
<div id="editor"></div>

答案 3 :(得分:0)

其官方网站上的描述完全清楚。
只需克隆ace-builds github repository
然后按照ace official website所述创建html文件。
HTML文件应加载此js脚本/ace-builds/src-noconflict/ace.js