Ace editor for in-browser notepad

editor-in-browser.js

var editor = (function() {
    /* REF: http://stackoverflow.com/a/950146 */
    function loadAceEditorJS(callback)
    {
        var head = document.getElementsByTagName("head")[0];
        var url = "http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js";
        // Adding the script tag to the head as suggested before
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        script.charset = "utf-8";
    
        // Then bind the event to the callback function.
        // There are several events for cross browser compatibility.
        script.onreadystatechange = callback;
        script.onload = callback;
    
        // Fire the loading
        head.appendChild(script);
    }
    
    /* Use this function as follows:
    
    data:text/html, <style type="text/css">#editor{position:absolute;top:0;right:0;bottom:0;left:0;font-size:16px;}</style>
    <div id="editor"></div><script src="editor-in-browser.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">editor.createEditor("editor");</script>
    
    */
    function createEditor(name) {
        loadAceEditorJS(function() {
            var editor=ace.edit(name);
            editor.session.setMode("ace/mode/javascript");
            editor.session.setValue(open());
            editor.session.on('change', function() {
                save(editor.session.getValue());
            });
            
            editor.setTheme("ace/theme/dawn");
            editor.setShowInvisibles(true);
            editor.setShowPrintMargin(true);
            editor.setHighlightActiveLine(true);
            editor.setDisplayIndentGuides(true);
            editor.setHighlightSelectedWord(true);
            editor.setBehavioursEnabled(true);
            editor.setFadeFoldWidgets(true);
            editor.setAnimatedScroll(true);
            
            editor.session.setFoldStyle("markbegin");
            editor.session.setUseSoftTabs(true);
            editor.session.setUseWrapMode(true);
            editor.session.setUseSoftTabs(true);
            editor.session.setUseSoftTabs(true);
            
            editor.renderer.setShowGutter(true);
            editor.renderer.setHighlightGutterLine(true);
            editor.renderer.setShowPrintMargin(true);
            editor.renderer.setPrintMarginColumn(120);
    
            editor.setOption("scrollPastEnd", true);
            editor.setOption("useElasticTabstops", true);
            editor.setOption("useIncrementalSearch", true);
        });
    }
    
    function open(key) {
        return localStorage.getItem(kay || 'default');
    }
    
    function save(contents, key) {
        localStorage.setItem(kay || 'default', contents);
    }
    
    return {
        createEditor: createEditor,
        open: open,
        save: save
    };
}());