Extend ACE javascript editor to support auto complete?

asked 2019-06-18 21:02:28 +0800

davout gravatar image davout
1435 3 18

updated 2019-06-19 05:17:00 +0800

I've been reviewing the ZK wrapper around the ACE Javascript editor found at...


I can't get the auto complete features to work. Any suggestions?

I created my own version of this ace data handler, basing it around the https://github.com/ajaxorg/ace latest source.

However, when I run this I get an error in the data wrapper js

var editor = ace.edit(editor_id);

error = "ace is not defined"

delete flag offensive retag edit

3 Answers

Sort by » oldest newest most voted

answered 2019-06-19 16:26:53 +0800

cor3000 gravatar image cor3000
5262 2 7
ZK Team

updated 2019-06-19 16:27:39 +0800

Instead of the raw sources you need to use the release/build versions ace provides in a separate "ace-builds" repository (e.g. tag v1.4.5).

I haven't tried that yet however it's the first thing that comes to mind based on your description.

link publish delete flag offensive edit

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

davout gravatar image 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...

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

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();
    div.setAttribute('id', editor_id);
    div.setAttribute('class', 'data-ace');
    var editor = ace.edit(editor_id);

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

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

link publish delete flag offensive edit

answered 2019-06-20 14:50:14 +0800

cor3000 gravatar image cor3000
5262 2 7
ZK Team

updated 2019-06-20 14:50:51 +0800

What you can do is to check in the developer tools that the scripts are loaded as expected. If there are no network and console errors, I assume if the scripts load and execute.

After that's done the issue must be somewhere inside ACE editor or your configuration, which is somewhat outside the scope of this forum, unless there are errors caused by ZK.

One possible thing to narrow down the cause is to test the same setup on a plain non-ZK html/jsp page, with an html-<div>. If that still doesn't give the results you need, then you have a case to ask in the ACE forums or their support.

If you identify a ZK issue you can refer to ZK support.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2019-06-18 21:02:28 +0800

Seen: 18 times

Last updated: Jun 20 '19

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More