Trình chỉnh sửa ACE: tạo trình chỉnh sửa mới động

Question

Tôi có tab bố cục dựa vào nơi tôi có thể thêm và xóa tab, khi tôi tạo tab mới, tôi muốn thêm một istance mới của trình chỉnh sửa ACE (http: //ace.ajax. org /) để nó (tôi đang sử dụng các tab jquery ui) nhưng như vậy không làm việc:

$(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

tôi đã tạo ra một chút fiddle do đó bạn có thể bắt đầu với các tab ui và biên tập viên ace: http://jsfiddle.net/VEfyU/2/

như bạn có thể thấy ở bên trái theo tài nguyên bên ngoài, tôi đã thêm jquery ui và tệp trình chỉnh sửa ace js. Tôi sử dụng jquery ui 1.10.3 và không sử dụng "add" vì nó không được dùng nữa.

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>