CODEWITHSUNDEEP
javascriptace-editor
Jordan Baron
Jordan Baron

Reputation: 4200

Ace editor mode not working

I am trying to get syntax highlighting working but when changing the mode it doesn't work

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/monokai.js"></script>
    <script="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/mode-javascript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
    <script src="scripts.js"></script>

scripts.js

var html = ace.edit("htmlEditor");
var css = ace.edit("cssEditor");
var js = ace.edit("jsEditor");

html.setTheme("ace/theme/monokai");
css.setTheme("ace/theme/monokai");
js.setTheme("ace/theme/monokai");

var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
js.session.setMode(new JavaScriptMode());

Upvotes: 1

Views: 5160

Answers (2)

Basheer AL-MOMANI
Basheer AL-MOMANI

Reputation: 15367

what let me to this question is that I got 404 error when I call setMode

I traversed the code to see whats going on, Ace tries to identify where Ace library and its files are located, and it does that by looking at the script tags within the page, so if it had a lock finding the lib location, it set it as a basePath for it,

but what if Ace is bundled within a one minified main js file main.js it will fail and return 404

to solve this 

if (window.ace) {
    configureAce();
    //....
}

function configureAce() {
    // this is important in case of bundling , to have Ace knows where
    // its files are located (like themes, workers and modes)
    // and get them from that path
    window.ace.config.set("basePath", "/resources/js/lib/ace");
}

Upvotes: 1

a user
a user

Reputation: 24149

You have a typo in your html <script=" also scripts for theme and modes must be inserted after ace.js

It is better to pass names to ace and let it load modes and themes by itself

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<div id="htmlEditor">&lt;html&gt;</div>
<div id="cssEditor">.css { color: red }</div>
<div id="jsEditor">var js</div>
<style>
html, body {
    height: 100%;
}
#htmlEditor, #cssEditor, #jsEditor  {
height:30%
}
</style>
<script>

var html = ace.edit("htmlEditor");
var css = ace.edit("cssEditor");
var js = ace.edit("jsEditor");

html.setTheme("ace/theme/monokai");
css.setTheme("ace/theme/monokai");
js.setTheme("ace/theme/monokai");

html.session.setMode("ace/mode/html");
css.session.setMode("ace/mode/css");
js.session.setMode("ace/mode/javascript");

</script>

Upvotes: 2

Related Questions