ACE编辑器:动态创建一个新的编辑器

ACE editor: create a new editor dynamically

本文关键字：编辑器 一个 动态 创建 ACE      更新时间：2023-09-26

我有一个基于我可以添加和删除选项卡的布局选项卡，当我创建一个新的选项卡时，我想添加一个新的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>

我已经创建了一个小提琴，以便您可以开始使用ui选项卡和ace编辑器:http://jsfiddle.net/VEfyU/2/

如您所见，在左边的

外部资源下，我添加了jquery UI和ace编辑器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>
相关文章：