CODEWITHSUNDEEP
javascriptace-editor
JBurlison
JBurlison

Reputation: 673

Implementing and working with ace for the first time

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.com/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.

Upvotes: 3

Views: 4795

Answers (4)

Yurii Halapup
Yurii Halapup

Reputation: 1362

It's described on their official website completely 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

Upvotes: 0

Stefan Neubig
Stefan Neubig

Reputation: 1018

You downloaded the source which requires require.js.

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

Upvotes: 7

Atheist
Atheist

Reputation: 525

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

Upvotes: 2

Shaurav Garg
Shaurav Garg

Reputation: 439

Have you tried removing the window.load action?

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

Upvotes: 0

Related Questions