javascript - Implementing and working with ace for the first time - Stack Overflow

admin管理员组

文章数量:1295692

I am Implementing ace into my site for the first time and I have some noob questions. I have only been programming for about a year so bear with me.

I have downloaded the code from . I am assuming (could be wrong) the code I need lies in /lib/ace/ so I copied the ace folder to my /lib/js/ in my dev environment. I imported the ace.js per the instructions on the github wiki.

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

I have my HTML code also:

<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 tells me ace is not defined where I am declaring my variable "editor" and also gives me this output:

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

that is from the ace.js. So I am missing something with getting this basic Implementation working.

I am Implementing ace into my site for the first time and I have some noob questions. I have only been programming for about a year so bear with me.

I have downloaded the code from https://github./ajaxorg/ace. I am assuming (could be wrong) the code I need lies in /lib/ace/ so I copied the ace folder to my /lib/js/ in my dev environment. I imported the ace.js per the instructions on the github wiki.

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

I have my HTML code also:

<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 tells me ace is not defined where I am declaring my variable "editor" and also gives me this output:

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

that is from the ace.js. So I am missing something with getting this basic Implementation working.

• javascript
• ace-editor

Share Follow edited Nov 27, 2012 at 7:02 HostileFork says dont trust SE 33.6k1313 gold badges102102 silver badges174174 bronze badges asked Apr 18, 2012 at 20:37 JBurlisonJBurlison 67333 gold badges1414 silver badges2525 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

You downloaded the source which requires require.js.

You should download one of the builds from https://github./ajaxorg/ace-builds to get started without additional requirements.

You must position your editor-div, either use "position:relative;" or "position:absolute;" in your css too.

Have you tried removing the window.load action?

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

It's described on their official website pletely clear.
Just clone ace-builds github repository
and then create html file as described on ace official website.
HTML file should load this js script /ace-builds/src-noconflict/ace.js

本文标签： javascriptImplementing and working with ace for the first timeStack Overflow