Extend ACE javascript editor to support auto complete?

answered 2019-06-19 23:33:40 +0800

davout
1435 ● 3 ● 18

I've installed the 'src/min' version from the github location suggested.

I adapted the zk.xml to reference the js lib required for auto completion...

<zk>
    <config-name>datahandler-ace-code-editor</config-name>
    <client-config>
        <data-handler>
            <name>ace-code-editor</name> <!-- data-ace-code-editor -->
            <link href="~./css/data-ace-code-editor.css" rel="stylesheet" /> <!-- custom css -->
            <script src="~./js/lib/ace.js" /> <!-- ace.js Library -->
            <script src="~./js/lib/ext-language_tools.js" /> <!-- ace.js Library -->
            <script src="~./js/data-ace-code-editor.js" /> <!-- Data Handler Script -->
        </data-handler>
    </client-config>
</zk>

I then updated the data-ace-code-editor.js to switch on autocompletion..

function (wgt, dataValue) {
    //Create a Div to init Ace
    var wgtDOM = wgt.$n(),
        editor_id = 'zk-ace-code-editor',
        div = document.createElement('div'),
        old = document.getElementById(editor_id);
    if (old) old.remove();
    jq(wgtDOM).hide();
    div.setAttribute('id', editor_id);
    div.setAttribute('class', 'data-ace');
    jq(div).insertAfter(wgtDOM);
    var editor = ace.edit(editor_id);

    //settings
    var settings = dataValue.length > 0 ? $.evalJSON(dataValue) : {};
    if (settings.theme)
        editor.setTheme(settings.theme);
    if (settings.mode)
        editor.getSession().setMode(settings.mode);
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
    //Set the default value
    editor.getSession().setValue(wgt.getValue());
    //Synchronize the value
    editor.getSession().on('change', function(){
        wgt.setValue(editor.getSession().getValue());
        wgt.fireOnChange();
    });
}

When I run this I still don't get autocomplete working within ace. Any suggestions?