Question

4

How to embed ace editor in my website

rated 0 times [ 7] [ 3] / answers: 1 / hits: 12057 / 9 Years ago, wed, september 2, 2015, 12:00:00

Guys lately i have been using the cloud9 ide and i wanted to add the ace editor to me website. To view the ace editor, here is the link: http://ace.c9.io/#nav=about

Can someone please tell me how to embed it in my website. I cant understand the tutorial given on the homepage of the ace editor

All help is appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ellisw

Add To Favorites

Follow

Total Points: 625

Total Questions: 92

Total Answers: 88

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

ellisw questions

1 How to check if event target is contained within an element?

Mon, Aug 23, 21, 00:00, 3 Years ago

1 Jest - one function mocks file for multiple test files

Fri, Nov 20, 20, 00:00, 4 Years ago

1 Electron Forge with react?

Sat, Jun 20, 20, 00:00, 4 Years ago

1 material-ui makeStyles: how to style by tag name?

Tue, Apr 21, 20, 00:00, 4 Years ago

1 Using async-await with node-fetch does not return the response to the calling method

Sun, Mar 22, 20, 00:00, 4 Years ago

View All

answered 9 Years ago kaylinshayd · Accepted Answer

Embedding to your website is clearly shown on the website:
http://ace.c9.io/#nav=embedding

Example:

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

</html>

Cloud9 IDE

If your using the cloud9 IDE, you can download the editor via..

Github: git clone git://github.com/ajaxorg/ace.git

Bower: bower install --save git clone git://github.com/ajaxorg/ace.git

NOTE: you will need to build the project.

If you want to use the pre built ones use this instead:
https://github.com/ajaxorg/ace-builds.git

Example
Here's my setup for the ace-editor:
https://ide.c9.io/anik786/cloud-9-sandbox