当选择语言下拉列表时，CodeMirror保持附加

Question

我使用CodeMirror为一个小项目提供语法突出显示，以节省编程部门的代码位。asp-mvc页面由textxt、语言下拉列表、描述文本框和代码文本框组成。当用户从下拉列表中进行第一次选择时，就会创建一个不错的Codemirror编辑器。如果要更改语言选择，则会创建一个新的CodeMirror框，并在第一个框的前面预页。每次做出选择时，这种情况都会继续进行，从而导致方框堆叠并变得混乱。我想在任何时候都要一个Codemirror编辑器。例如，如果他们要键入文本，然后决定选择语言，则应该将文本复制到一个新的CodeMirror编辑器中。下面是关于如何在手册中执行此操作的说明

如果您不想将编辑器附加到元素中，并且需要对其插入方式进行更多的控制，那么CodeMirror函数的第一个参数也可以是一个函数，在给定DOM元素时，将它插入文档的某个地方。例如，这可以用于用真正的编辑器替换文本区域： 变量myCodeMirror =CodeMirror(函数){ myTextArea.parentNode.replaceChild(elt，myTextArea)；}，{value: myTextArea.value})；但是，对于此用例(这是使用CodeMirror的一种常见方式)，库提供了一个更强大的快捷方式： var myCodeMirror = CodeMirror.fromTextArea(myTextArea)；这将确保在表单(如果它是表单的一部分)提交时，文本区域的值与编辑器的内容一起更新。

正如您将在我的代码中看到的，我正在使用第二种方法，但没有效果。下面是标记和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控件中导出，此时控制器没有什么特别之处。不管语言选择框更改了多少次，对于如何实现一个单一的CodeMirror编辑器，有什么想法吗？

Answer 1

您只需要调用fromTextArea一次(每个文本区域)。

因此，创建它，保存它，并使用它，如果你需要改变任何以后。

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();