Trouble with Ace code editor

Question

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?

a user · Accepted Answer · 2013-07-29 08:00:28Z

1

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

answered Jul 29, 2013 at 8:00

a user

24.2k6 gold badges63 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

a user Over a year ago

Do you use ie8? in that case try putting code in pre instead of div jsbin.com/ojijeb/172/edit

a user Over a year ago

Ok, your question doesn't give enough information to see what's wrong on your site. It works fine on jsbin so the problem is somewhere on your site.

Joe Pigott Over a year ago

I was kinda sick of coding so I used Weebly to make my site. I tried using the Embed Code option to use it, but when I add height: 500px, It still only shows as one line.

Joe Pigott Over a year ago

Maybe I should put it in an iFrame?

a user Over a year ago

If you can't figure out what is the problem, maybe you should at least show the page demonstrating it?

|

Carl Younger · Accepted Answer · 2014-05-25 18:50:23Z

0

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();

edited May 25, 2014 at 18:50

answered May 25, 2014 at 18:45

Carl Younger

3,12826 silver badges38 bronze badges

Comments

Daniel · Accepted Answer · 2017-01-14 01:33:13Z

0

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>

edited Jan 14, 2017 at 1:33

Daniel

3,5243 gold badges36 silver badges48 bronze badges

answered Jan 13, 2017 at 15:14

Dasra Khadka

13 bronze badges

Collectives™ on Stack Overflow

Trouble with Ace code editor

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related