Javascript ACE编辑器：动态创建新编辑器

我有一个布局选项卡，我可以在其中添加和删除选项卡，当我创建一个新选项卡时，我想添加一个新的ACE编辑器(http://ace.ajax.org/)这样做（我使用的是jquery ui选项卡），但这样做不起作用：

$(function() {
    var $tab_title_input = $( "#tab_title"),
        $tab_content_input = $( "#tab_content" );
    var tab_counter = 3;

    // tabs init with a custom tab template and an "add" callback filling in the content
    var $tabs = $( "#tabs").tabs({
        tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
        add: function( event, ui ) {
            var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
            $( ui.panel ).append("<div id=\"editor2\">" + tab_content + "</div>");  }       

    });

    // modal dialog init: custom buttons and a "close" callback reseting the form inside
    var $dialog = $( "#dialog" ).dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Add: function() {
                addTab();
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        open: function() {
            $tab_title_input.focus();
        },
        close: function() {
            $form[ 0 ].reset();
        }
    });

    // addTab form: calls addTab function on submit and closes the dialog
    var $form = $( "form", $dialog ).submit(function() {
        addTab();
        $dialog.dialog( "close" );
        return false;
    });

    // actual addTab function: adds new tab using the title input from the form above
    function addTab() {
        var tab_title = $tab_title_input.val() || "Tab " + tab_counter;
        $tabs.tabs( "add", "#tabs-" + tab_counter, tab_title )
             .tabs( "select", "#tabs-" + tab_counter, tab_title );
        tab_counter++;
        var content_height = $('.content').height();
        $('.ui-tabs-panel').css('height', content_height - 97);
        $('div#editor').css('height', content_height - 97);
                    var editor2 = ace.edit("editor2");
    var scroll = editor2.renderer.setHScrollBarAlwaysVisible(false);
    var JavaScriptMode = require("ace/mode/javascript").Mode;
    editor2.getSession().setMode(new JavaScriptMode());
    editor2.setTheme("ace/theme/twilight");
                var content_height = $('.content').height();
        $('.ui-tabs-panel').css('height', content_height - 97);
        $('div#editor').css('height', content_height - 97);
    }

    // addTab button: just opens the dialog
    $( "#add_tab" )
        .button()
        .click(function() {
            $dialog.dialog( "open" );
        });

    // close icon: removing the tab on click
    // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
    $( "#tabs span.ui-icon-close" ).live( "click", function() {
        var index = $( "li", $tabs ).index( $( this ).parent() );
        $tabs.tabs( "remove", index );
    });
});
</script>

$（函数（）{
var$tab_title_input=$（“#tab_title”），
$tab_content_input=$（“#tab_content”）；
var tab_计数器=3；
//tabs init，带有自定义选项卡模板和填充内容的“添加”回调
var$tabs=$（“#tabs”）.tabs({
选项卡模板：“
删除选项卡”
”，
添加：功能（事件、用户界面）{
var tab_content=$tab_content_input.val（）| |“tab”+tab_counter+“content.”；
$（ui.panel）.append（“+tab_content+”）；}
});
//模态对话框初始化：自定义按钮和“关闭”回调重置表单内部
var$dialog=$（“#dialog”）.dialog({
自动打开：错误，
莫代尔：是的，
按钮：{
添加：函数（）{
addTab（）；
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
},
打开：函数（）{
$tab_title_input.focus（）；
},
关闭：函数（）{
$form[0].reset（）；
}
});
//addTab表单：在提交时调用addTab函数并关闭对话框
var$form=$（$form“，$dialog）.submit（函数（）{
addTab（）；
$dialog.dialog（“关闭”）；
返回false；
});
//实际addTab函数：使用上面表单中输入的标题添加新选项卡
函数addTab（）{
var tab_title=$tab_title_input.val（）| |“tab”+tab_计数器；
$tabs.tabs（“添加”、“#tabs-”+tab_计数器，tab_标题）
.制表符（“选择“，”制表符-“+制表符计数器，制表符标题）；
tab_计数器++；
var content_height=$（'.content'）.height（）；
$（'ui tabs panel'）.css（'height'，content_height-97）；
$（'div#editor'）.css（'height'，content#u height-97）；
var editor2=ace.edit（“editor2”）；
var scroll=editor2.renderer.sethscrolllbaralwaysvisible（false）；
var JavaScriptMode=require（“ace/mode/javascript”）.mode；
editor2.getSession（）.setMode（新的JavaScriptMode（））；
编辑2.setTheme（“ace/theme/twilight”）；
var content_height=$（'.content'）.height（）；
$（'ui tabs panel'）.css（'height'，content_height-97）；
$（'div#editor'）.css（'height'，content#u height-97）；
}
//addTab按钮：只需打开对话框
$（“#添加#选项卡”）
.按钮（）
。单击（函数（）{
$dialog.dialog（“打开”）；
});
//关闭图标：单击删除选项卡
//注意：可关闭选项卡将是未来的一个选项-请参阅http://dev.jqueryui.com/ticket/3924
$（“#选项卡span.ui图标关闭”）.live（“单击”，函数（）{
var index=$（$li'，$tabs）.index（$（this.parent（））；
$tabs.tabs（“删除”，索引）；
});
});

我创建了一个小提琴，以便您可以开始使用ui选项卡和ace编辑器：

正如您在左侧“外部资源”下看到的，我添加了jquery ui和ace编辑器js文件。我使用jQueryUI1.10.3，没有使用“add”，因为它现在已经被弃用了

javascript:

$(document).ready(function() {

    // initialize tabs
    $('#tabs').tabs();

    // array containing all the editors we will create
    var editors = [];

    // initialize button listener
    $('#addTab').on('click', function() {

        console.log('add a tab with an ace editor instance');

        var tabsElement = $('#tabs');
        var tabsUlElement = tabsElement.find('ul');

        // the panel id is a timestamp plus a random number from 0 to 10000
        var tabUniqueId = new Date().getTime() + Math.floor(Math.random()*10000);

        // create a navigation bar item for the new panel
        var newTabNavElement = $('<li id="panel_nav_' + tabUniqueId + '"><a href="#panel_' + tabUniqueId + '">' + tabUniqueId + '</a></li>');

        // add the new nav item to the DOM
        tabsUlElement.append(newTabNavElement);

        // create a new panel DOM
        var newTabPanelElement = $('<div id="panel_' + tabUniqueId + '" data-tab-id="' + tabUniqueId + '">New editor ' + tabUniqueId + ': <br/></div>');

        tabsElement.append(newTabPanelElement);

        // refresh the tabs widget
        tabsElement.tabs('refresh');

        var tabIndex = $('#tabs ul li').index($('#panel_nav_' + tabUniqueId));

        console.log('tabIndex: ' + tabIndex);

        // activate the new panel
        tabsElement.tabs('option', 'active', tabIndex);

        // create the editor dom
        var newEditorElement = $('<div id="editor_' + tabUniqueId + '">// some code here</div>');

        newTabPanelElement.append(newEditorElement);

        // initialize the editor in the tab
        var editor = ace.edit('editor_' + tabUniqueId);
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");

        // set the size of the panel
        newTabPanelElement.width('600');
        newTabPanelElement.height('600');

        // set the size of the editor
        newEditorElement.width('500');
        newEditorElement.height('500');

        // resize the editor
        editor.resize();

        editors.push({ id: tabUniqueId, instance: editor });

        // add an editor/panel close button to the panel dom
        var closeButton = $('<button class="close">close</button>');

        newTabPanelElement.prepend(closeButton);

    });

    $('#tabs').on('click', '.close', function() {

        console.log('close a tab and destroy the ace editor instance');

        console.log($(this).parent());

        var tabUniqueId = $(this).parent().attr('data-tab-id');

        console.log(tabUniqueId);        

        var resultArray = $.grep(editors, function(n,i){
            return n.id === tabUniqueId;
        }, true);

        var editor = resultArray[0].instance;

        // destroy the editor instance
        editor.destroy();

        // remove the panel and panel nav dom
        $('#tabs').find('#panel_nav_' + tabUniqueId).remove();
        $('#tabs').find('#panel_' + tabUniqueId).remove();

    });

});

$（文档）.ready（函数（）{
//初始化选项卡
$（“#tabs”）.tabs（）；
//包含我们将创建的所有编辑器的数组
var编辑器=[]；
//初始化按钮侦听器
$（'#addTab'）。在（'单击'，函数（）上）{
log（'添加带有ace编辑器实例的选项卡'）；
var tabsElement=$（“#tabs”）；
var tabsulement=tabsElement.find（'ul'）；
//面板id是时间戳加上0到10000之间的随机数
var tabUniqueId=new Date（）.getTime（）+Math.floor（Math.random（）*10000）；
//为新面板创建导航栏项
var newTabNavElement=$（'li id=“panel_nav”+tabUniqueId+'”>）；
//将新的导航项添加到DOM
tabsUlElement.append（newtabnaveElement）；
//创建一个新的面板DOM
var newTabPanelElement=$（'neweditor'+tabUniqueId+'：
'）；
tabseElement.append（newTabPanelElement）；
//刷新选项卡小部件
tabseElement.tabs（“刷新”）；
var tabIndex=$（'#tabs ul li'）。索引（$（'#panel_nav'+tabUniqueId））；
log（'tabIndex:'+tabIndex）；
//激活新面板
tabseElement.tabs（'option'，'active'，tabIndex）；
//创建编辑器dom
var newEditorElement=$（“//此处有一些代码”）；
newTabPanelElement.append（newEditorElement）；
//在选项卡中初始化编辑器
var editor=ace.edit（'editor_u'+tabUniqueId）；
编辑：setTheme（“ace/theme/monokai”）；
editor.getSession（）.setMode（“ace/mode/javascript”）；
//设置面板的大小
newTabPanelElement.宽度（'600'）；
newTabPanelElement.高度（'600'）；
//设置编辑器的大小
newEditorElement.width（'500'）；
newEditorElement.高度（'500'）；
//调整编辑器的大小
editor.resize（）；
push（{id:tabUniqueId，实例：editor}）；
//向面板dom添加编辑器/面板关闭按钮
var closeButton=$（'close'）；
newTabPanelElement.prepend（关闭按钮）；
});
$（'#制表符'）。在（'单击'，'.close'，函数（）上{
log（'关闭选项卡并销毁ace编辑器实例'）；
log（$（this.parent（））；
var tabUniqueId=$（this.parent（）.attr（'data-tab-id'）；
console.log（tabUniqueId）；
var resultArray=$.grep（编辑器，函数（n，i）{
返回n.id==tabUniqueId；
}，对）；
var editor=resultArray[0]。实例；
//销毁编辑器实例
editor.destroy（）；
//卸下面板和面板导航dom
$（“#选项卡”）。查找（“#面板#导航”+选项卡
<div id="tabs">
    <ul>
    </ul>
</div>

<button id="addTab">Add an editor</button>