ACEエディタ：新しいエディタを動的に作成する

Question

レイアウトタブは、タブを追加したり削除したりすることができます。新しいタブを作成すると、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> 

Answer 1

あなたはUIタブとエースエディタを使い始めることができるように、私は少しフィドルを作成しました：http://jsfiddle.net/VEfyU/2/

外部リソースの左側に表示されているように、私はjquery uiとace editor jsファイルを追加しました。私はjquery ui 1.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(); 

    }); 

}); 

HTML：

<div id="tabs"> 
    <ul> 
    </ul> 
</div> 

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