Loading ace editor into a widget

[psychemedia]

I'm seem to be going round in circles on this one.

What's the trick for loading something like the ace editor?

If I try the following I get a new error message: TypeError: define is not a function error, which suggests I should be loading things in using require?

html="""<h1>sshgdhsgd</h1>
<div id="editor"></div>
"""

test0 = jp_proxy_widget.JSProxyWidget()

e = test0.element

# Call some standard jQuery method on the widget element:
e.empty()
e.width("1000px")
e.height("1000px")


test0.load_js_files(["ace-src-min/ace.js"])
#test0.require_js("ace/ace", "ace-src-min/ace.js")

e.html(html)

sc="""
     var editor = ace.edit("editor");
"""
test0.js_init(sc)

display(test0)

If instead replace the script load with a require load, eg test0.require_js("ace/ace", "ace-src-min/ace.js"), then I get a new error message: ReferenceError: ace is not defined error?

It's probably something obvious but I don't see it?

[AaronWatters]

I got it working with some effort. I think you need to use require
to load ace

ace_test = jp_proxy_widget.JSProxyWidget()

def load_test():
    ace_test.js_init("""
        element.requirejs.config({
          paths: {
              d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min',
              ace: '//cdnjs.cloudflare.com/ajax/libs/ace/1.4.7/ace'
          }
        });
        element.requirejs(["ace"], function() { // no argument to load function!
            element.html("ace is loaded: " + ace)
            var e = $('<div id="editor"></div>').appendTo(element);
            e.width("500px");
            e.height("300px");
            var editor = ace.edit(e[0]);
        });
    """)
# You need to wrap the function in "uses_require" to make sure
# require is loaded properly
ace_test.uses_require(load_test)
ace_test

[psychemedia]

Ah, thanks... I started exploring in another context and think I was getting a race condition too?

…

On Wed, 26 Feb 2020 at 14:36, Aaron Watters ***@***.***> wrote: I got it working with some effort. I think you need to use require to load ace ace_test = jp_proxy_widget.JSProxyWidget() def load_test(): ace_test.js_init(""" element.requirejs.config({ paths: { d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min', ace: '//cdnjs.cloudflare.com/ajax/libs/ace/1.4.7/ace' } }); element.requirejs(["ace"], function() { // no argument to load function! element.html("ace is loaded: " + ace) var e = $('<div id="editor"></div>').appendTo(element); e.width("500px"); e.height("300px"); var editor = ace.edit(e[0]); }); """)# You need to wrap the function in "uses_require" to make sure# require is loaded properly ace_test.uses_require(load_test) ace_test [image: image] <https://user-images.githubusercontent.com/13857252/75354695-69f35d80-587b-11ea-9164-3310848a9163.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6?email_source=notifications&email_token=AAAUILG4ETKTTJQVTN26EE3REZ47ZA5CNFSM4K3S44F2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENAO3TY#issuecomment-591457743>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAUILAYHTRT2DAJ3LEADQLREZ47ZANCNFSM4K3S44FQ> .

[AaronWatters]

Actually, I got sporadic failures with the method given above.

This seems to work consistently in my tests:

ace_test = jp_proxy_widget.JSProxyWidget()

def load_test():
    ace_test.js_init("""
        // load ace from a CDN using require.js
        element.requirejs.config({
          paths: {
              //d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min',
              ace: '//pagecdn.io/lib/ace/1.4.8'
          }
        });
        // Use require.js to attach ace to the window object.
        element.requirejs(["ace/ace"], function(ace) {  // no argument to load function!
            element.html("ace is loaded: " + ace)
            var e = $('<div id="editor"></div>').appendTo(element);
            e.width("500px");
            e.height("300px");
            var editor = ace.edit(e[0]);
        });
    """)

# wrap the load operation in 'uses_require' to initialize require.js.
ace_test.uses_require(load_test)
ace_test

[psychemedia]

Thanks... one thing I notice if I run this is that I get the Uninitialized Proxy Widget warning as if things were loaded twice?