CODEWITHSUNDEEP
javascriptsyntax-highlightingace-editor
Dylan
Dylan

Reputation: 13924

How to automatically pick a "mode" for Ace Editor, given a file extension

I'm working on a project that uses a java/scala backend (Lift, to be precise, though that shouldn't affect this question), and as part of the frontend we use Ace Editor. I've been googling for a while and have yet to find an answer to this question:

Given a file extension (e.g. js, c, cpp, h, java, rb, etc), how can I automatically pick an Ace "mode" for the appropriate language?

I'm hoping to avoid manually creating a map, a la js -> javascript, c -> c_cpp, java -> java. Is there a java/scala library available for this? Or better yet, does Ace have this functionality built in somehow?

Upvotes: 21

Views: 13924

Answers (3)

mutong
mutong

Reputation: 1

The key is editor.session.setMode(mode.mode);

<!-- ace editor -->
<script src="/ace/v1_4_11/ace.js"></script>
<script src="/ace/v1_4_11/ext-modelist.js"></script>
<script src="/ace/v1_4_11/ext-language_tools.js"></script>

let editor = null;      // reference to the Ace editor
let aceModeList = null; // used by the Ace editor

function initializeAceEditor() {
    aceModeList = ace.require("ace/ext/modelist");
    editor = ace.edit("aceEditorDiv");
}

// load the file and set the file-extension specific mode
let mode = aceModeList.getModeForPath(fileName); // detects for example .xml - or any other file extebsion
console.log(`Ace: selected mode = ${mode.mode}`);
try {
    editor.session.setMode(mode.mode);
} catch (e) {
    console.log("Ace: No specific mode available for file extension");
}

editor.getSession().setValue(Base64.decode(fileContentB64));

There is no need to preload an specific mode *.js file in browser like for example "mode-xml.js". The corresponding mode file is automatically loaded on demand.

Upvotes: 0

peter
peter

Reputation: 95

Here is how I solved it. This is a more updated version that I used in my Django project.

    <script src="{% static 'ace/src-noconflict/ace.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'ace/src-noconflict/ext-modelist.js' %}"></script>
<script src="{% static 'ace/src-noconflict/ext-language_tools.js' %}"></script>

<script>
    var modelist = ace.require("ace/ext/modelist");
    var editor = ace.edit("editor");
    editor.renderer.setScrollMargin(40, 150)
    document.getElementById('editor').style.fontSize = '15px';
    editor.setTheme("ace/theme/dracula");

    var full_path = "{{ file.directory_path }}";
    document.getElementById("demo").innerHTML = full_path
    var mode = modelist.getModeForPath(full_path);//mode
    console.log(mode);
    editor.session.setMode(mode.mode);
    //Ace editor autocompletion
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });

</script>

Upvotes: 0

a user
a user

Reputation: 24104

Ace now provides modelist extension to do this.

var modelist = ace.require("ace/ext/modelist")
var filePath = "blahblah/weee/some.js"
var mode = modelist.getModeForPath(filePath).mode
editor.session.setMode(mode) // mode now contains "ace/mode/javascript".

Note that if you are using prebuilt version of ace you need to include ace.js and ext-modelist.js files in your page.
With source version, you need to replace ace.require with require and require.js will load all dependencies automatically.

See https://github.com/ajaxorg/ace/blob/master/demo/modelist.html and https://github.com/ajaxorg/ace-builds/blob/master/demo/modelist.html for examples of how to use it

Upvotes: 40

Related Questions