CODEWITHSUNDEEP
javascriptace-editor
Joe Pigott
Joe Pigott

Reputation: 8469

Trouble with Ace code editor

I have successfully created an Ace editor before, but recently I am making a website called CodeProjects, and I want to put an Ace editor in. Whenever I try, it only shows the text function foo(items) { var x = "All this is syntax highlighted"; return x; }. On the page http://ace.c9.io/#nav=embedding&api=ace, it says you only need the code:

<!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>

but when I try to embed it (or even just make the editor, not the site), again, it only shows function foo(items) { var x = "All this is syntax highlighted"; return x; }

Any suggestions?

Upvotes: 1

Views: 3620

Answers (3)

Dasra Khadka
Dasra Khadka

Reputation: 1

In my experience, you need to change div to pre. Just using pre instead of div in following way should solve your problem.

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

Upvotes: 0

Carl Younger
Carl Younger

Reputation: 3080

You need to put the content outside of the editor div [or fetch the content on page load using AJAX]. Either way, you then load the content into the editor with JavaScript: editor.setValue("hello world");.

To set the height of the editor, you resize the div it lives in, then call the editor's resize method.

var div = document.getElementById('editor');    
div.style.height = some_multiple_of_the_line_height_for_tidiness;
editor.resize();

Upvotes: 0

a user
a user

Reputation: 24149

it also says to copy files into your project. If you don't want to do that, include script from cdn

<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ace.js"
             type="text/javascript" charset="utf-8"></script>

see http://jsbin.com/ojijeb/165/edit

Upvotes: 1

Related Questions