Need help with autocomplete and snippets

[Jens Falkenstein]

Hi there, I´m very new to ace. I have a problem with the autocomplete and snippet feature.
I dont know how to add my own ones. Is there anyone who can help me...

The Problem is, that i want to append my own snippets to the existing snippet i.e. javascript

Here is my code:

function initAce(editorID,syn) {

    ace.require("ace/ext/language_tools");

    $('#LayoutFileBodyDiv').append('<div id="editor_'+editorID+'"></div>');

    aceEditor['editor_'+editorID] = ace.edit('editor_'+editorID);

    aceEditor['editor_'+editorID].setTheme("ace/theme/chrome");

    aceEditor['editor_'+editorID].getSession().setMode("ace/mode/"+syn);

    aceEditor['editor_'+editorID].getSession().setUseSoftTabs(false);

    aceEditor['editor_'+editorID].setShowPrintMargin(false);

    aceEditor['editor_'+editorID].setOptions({

enableBasicAutocompletion: true,

enableSnippets: true

    });

}

[Harutyun Amirjanyan]

That's very easy to do

var snippetManager = ace.require("ace/snippets").snippetManager;
var config = ace.require("ace/config");

ace.config.loadModule("ace/snippets/javascript", function(m) {
if (m) {
snippetManager.files.javascript = m;
m.snippetText += mySnippetText; // if you have snippets in the
ace snippet format
m.snippets = snippetManager.parseSnippetFile(m.snippetText);

// or do this if you already have them parsed
m.snippets.push({
content: "${1:class_name}.prototype.${2:method_name} =
function(${3:first_argument}) { ${4:// body...}",
name: "proto",
tabTrigger: "proto"
});

snippetManager.register(m.snippets, m.scope);
}
});

[Jens Falkenstein]

thank you, that was exactly what I was looking

[Morgan Yarbrough]

Is it possible to accomplish this without using require.js? I cannot use require.js in my project so the code you posted does not work for me.

So far I have this working great:

 var editor = ace.edit('editor');

    editor.setTheme("ace/theme/chrome");

    editor.getSession().setMode("ace/mode/javascript");

    editor.getSession().setUseWrapMode(true);

    editor.getSession().setWrapLimitRange(null, null);

    editor.setBehavioursEnabled(true);//auto pairing of quotes & brackets

    editor.setShowPrintMargin(false);

    editor.session.setUseSoftTabs(true);//use soft tabs (likely the default)

    editor.getSession().on('change', function (e) {

        EditorChanged();

    });

    //called when editor changes

    function EditorChanged() {

      //custom stuff

    }

    //Include auto complete- Only for Template Editor page

    ace.config.loadModule('ace/ext/language_tools', function () {

        editor.setOptions({

            enableBasicAutocompletion: true,

            enableSnippets: true

        })

    });

[Harutyun Amirjanyan]

the code i posted doesn't use require js
but you need ace/ext/language_tools to be loaded to run it
see http://jsbin.com/ojijeb/252/edit

> --
> You received this message because you are subscribed to the Google Groups
> "Ajax.org Cloud9 Editor (Ace)" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to ace-discuss...@googlegroups.com.
> To post to this group, send email to ace-d...@googlegroups.com.
> Visit this group at http://groups.google.com/group/ace-discuss.
> For more options, visit https://groups.google.com/groups/opt_out.

[Morgan Yarbrough]

I figured it out. Here is my code for anyone else who may want it:

var editor = ace.edit('editor');

    editor.setTheme("ace/theme/chrome");

    editor.getSession().setMode("ace/mode/javascript");    

    //Include auto complete

    ace.config.loadModule('ace/ext/language_tools', function () {

        editor.setOptions({

            enableBasicAutocompletion: true,

            enableSnippets: true

        })

    });    

    //Add custom snippets

    ace.config.loadModule('ace/snippets/snippets', function () {

        var snippetManager = ace.require('ace/snippets').snippetManager; 

        ace.config.loadModule('ace/snippets/javascript', function(m) {

            if (m) { 

                m.snippets.push({ 

                    content: '${1:test}.this is custom snippet text!', 

                    tabTrigger: 'CustomSnippet' 

                });

                snippetManager.register(m.snippets, m.scope); 

            }

        });

    });

[Harutyun Amirjanyan]

ace.config.loadModule('ace/snippets/snippets', function () {

is wrong it only loads snippets for `snippets` mode

you really need to put that into

[Kaan Özcan]

Also how is this making sure language_tools loaded first?

[Harutyun Amirjanyan]

It doesn't.
Either include script ext-language_tools.js after ace.js

https://github.com/ajaxorg/ace-builds/blob/master/demo/autocompletion.html#L28
or use require or ace.config.loadModule to load it

For more options, visit https://groups.google.com/d/optout.