jquery - CodeMirror がテキストエリアを正しく更新しない

Question

jquery-ui タブ ウィジェット内のページに CodeMirror の複数のインスタンスがあります。これらのインスタンスを次のように動的に作成します。

//Returns a code mirror editor
editor.create = function(id){

    var codeID = "code-" + id;
    var $node = $('<form><textarea id="' + codeID + '" name="' + codeID + '">test</textarea></form>');
    editor.editors[id] = CodeMirror.fromTextArea($node.find("textarea").get(0), editor.options);

    return $node;


};

各インスタンスは、 と呼ばれるグローバル配列に格納されますeditors。

作成されると、DOM に追加されます。

var $editor = editor.create(id);
var tabID = "tabs-" + id;
var $tab = $('<li id=' + id + '><a href="#' + tabID + '">' + name + '</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>');
var $tabPanel = $('<div id="' + tabID + '"></div>');

$tabPanel.append($editor);

$('#coder > ul').append($tab);
$('#coder').append($tabPanel);
coderTabs.tabs("refresh");

テキストエリアに配置されたテスト テキストがエディターに表示されます。ただし、呼び出しeditor.editors[id].save()てもテキストエリアは更新されません。

$('#project-save').click(function(){
        var active = $( "#coder" ).tabs( "option", "active" );
        var id = $('#coder .ui-tabs-nav li').eq(active).attr("id");
        console.log(editor.editors[id]);
        editor.editors[id].save();
        return false;
}); 

テキストエリアを更新するために欠落している手順がわかりません。どんな助けでも大歓迎です！