选择语言下拉列表时，CodeMirror 会继续追加

Question

我正在使用 CodeMirror 为一个小项目提供语法高亮显示，以节省编程部门的代码位。 asp-mvc 页面由一个 textxt、一个语言下拉列表、一个描述文本框和一个代码文本框组成。当用户从下拉列表中选择 his/her 时，一个漂亮的 Codemirror 编辑器就创建好了。如果他们要更改语言选择，则会创建一个新的 CodeMirror 框并预先添加到第一个框上方。每次进行选择时都会发生这种情况，导致框堆叠并变得混乱。我一直想要一个单一的 Codemirror 编辑器。例如，如果他们要输入文本，然后决定选择语言，则应将文本复制到新的 CodeMirror 编辑器中。以下是 manual:

中如何执行此操作的说明

In cases where you don't want to append the editor to an element, and need more control over the way it is inserted, the first argument to the CodeMirror function can also be a function that, when given a DOM element, inserts it into the document somewhere. This could be used to, for example, replace a textarea with a real editor:

var myCodeMirror = CodeMirror(function(elt) {
myTextArea.parentNode.replaceChild(elt, myTextArea); }, {value: myTextArea.value}); However, for this use case, which is a common way to use CodeMirror, the library provides a much more powerful shortcut:

var myCodeMirror = CodeMirror.fromTextArea(myTextArea); This will, among other things, ensure that the textarea's value is updated with the editor's contents when the form (if it is part of a form) is submitted.

正如您将在我的代码中看到的那样，我使用的是第二种方法，但无济于事。这是标记和 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 ONCE（每个文本区域）。

所以创建它，保存它，并在以后需要更改时使用它。

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

选择语言下拉列表时，CodeMirror 会继续追加

CodeMirror keeps appending when language dropdown is selected

html

c#

asp.net

codemirror