Loading ace editor into a widget about jp_proxy_widget HOT 4 OPEN

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

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