当选择语言下拉框时，CodeMirror会继续追加

我正在使用CodeMirror为一个小项目提供语法高亮显示，以保存编程部门的代码位。asp-mvc页面由一个文本、一个语言下拉列表、一个描述文本框和一个代码文本框组成。当用户从下拉菜单中进行第一次选择时，就会创建一个不错的codemmirror编辑器。如果他们要更改语言选择，则会创建一个NEW CodeMirror框，并将其预先挂载在第一个框的上方。每次进行选择时都会发生这种情况，导致盒子堆叠起来，变得令人困惑。我希望始终只有一个codemmirror编辑器。例如，如果他们要输入文本，然后决定选择语言，则应该将文本复制到新的codemmirror编辑器中。下面是手册中对如何做到这一点的描述:

如果您不想将编辑器附加到元素，并且需要对插入方式进行更多控制，则第一个参数CodeMirror函数也可以是一个函数，当给定一个元素，将其插入文档的某个位置。这可能是例如，用来用真正的编辑器替换文本区:

var myCodeMirror = CodeMirror(function(elt) {
myTextArea.parentNode。方法的(英语教学,myTextArea);},{值:myTextArea.value});然而，对于这个用例来说，这是一种常见的方法要使用CodeMirror，库提供了一个更强大的快捷方式:

var myCodeMirror = CodeMirror.fromTextArea(myTextArea);这将,除其他事项外，确保textarea的值更新为编辑器的内容(如果它是表单的一部分)提交。

正如您将在我的代码中看到的，我正在使用第二种方法，但无济于事。下面是标记和JavaScript:

@using (Html.BeginForm("Save", "Home", FormMethod.Post, new {id="CodeBlock"}))
{
    @Html.TextBoxFor(m => m.Title, new { type = "Search", autofocus = "true", id = "title", placeholder = "Code snip Title", style = "width: 200px", @maxlength = "50" })
    @Html.DropDownList("Language",
    new SelectList(Enum.GetValues(typeof(LangType))),
    "Select Language", new {id="codeDDl", @onchange = "changeSyntax()" })
    <p></p>
    @Html.TextAreaFor(m => m.Description, new { type = "Search", autofocus = "true", id = "description", placeholder = "Code snip Description",style = "Width: 800px" })
    <p></p>
    <div id="CodeArea">
        @Html.TextAreaFor(m => m.Code, new {id = "code", style = "width: 800px"})
    </div>
    <p></p>

    <input type="submit" value="Submit" />
    <input type="button" value="Reset" onclick="Reset()"/>


}
<script>
    var cm;
    function changeSyntax() {
        switch (document.getElementById("codeDDl").selectedIndex) {
        case 1:                 
            BuildBox(true, true, "text/x-csharp");  
            break;
        case 2:
            BuildBox(true, true, "text/x-css");
            break;
        case 3:
            BuildBox(true, true, "text/x-chtml");
            break;
        case 4:
            BuildBox(true, true, "text/x-javascript");
            break;
        case 5:
            BuildBox(true, true, "text/x-perl");
            break;
        case 6:
            BuildBox(true, true, "text/x-php");
            break;
        case 7:
            BuildBox(true, true, "text/x-python");
            break;
        case 8:
            BuildBox(true, true, "text/x-ruby");
            break;
        case 9:
            BuildBox(true, true, "text/x-sql");
            break;
        case 10:
            BuildBox(true, true, "text/x-vb");
            break;
        case 11:
            BuildBox(true, true, "text/x-xml");
            break;
        }
    }
    function BuildBox(lines, match, mode) {
        cm = CodeMirror.fromTextArea(document.getElementById("code"),
        {
            lineNumbers: lines,
            matchBrackets: match,
            mode: mode
        });

    }
    function Reset() {
        cm.toTextArea();
        document.getElementById("code").value = "";
        document.getElementById("codeDDl").disabled = false;
        document.getElementById("codeDDl").selectedIndex = 0;
    }

模型很简单，可以从Razor控件中导出，此时控制器没有什么特别的。有什么想法在那里，我可以完成有一个单一的codemirmirror编辑器出现，无论多少次的语言选择框被更改?

var cmInstance = $('#code').data('CodeMirrorInstance');
if (!cmInstance)
{
    cmInstance = CodeMirror.fromTextArea(document.getElementById("code"),
    {
        lineNumbers: lines,
        matchBrackets: match,
        mode: mode
    });
    $('#code').data('CodeMirrorInstance', cmInstance);
}

//later
var cm = $('#code').data('CodeMirrorInstance');
cm.whateverYouWantToDoToCodeMirror();