<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>

 <button id="btn" onclick="myFunction()">Click me</button>
<div class="container-fluid h-100 p-0 m-0">
   <div id="myEditor" class="row h-100 w-100 m-0">
   </div>
</div>


<script>
YUI().use(
    'aui-ace-editor',
    function(Y) {
        var editor = new Y.AceEditor({
            boundingBox: '#myEditor',
            mode: 'scheme',
        }).render();

        var editor = ace.edit("myEditor");
        editor.setValue("foo");
        editor.setTheme("ace/theme/chaos");
        editor.setShowPrintMargin(false);
        editor.setValue("<%= @text %>")

        editor.session.on('change', function(delta) {
            action = delta.action;
            range = delta.range;

            // delta.start, delta.end, delta.lines, delta.action
            console.log(delta.data);
        });
    }
);

function myFunction() {
    document.getElementById("btn").innerHTML = "Hello World";
    Foo.bar();
}
var socket = import("/js/js/socket.js");
</script>