Question

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

中有关如何执行此操作的说明

如果您不想将编辑器附加到元素，并且需要更多地控制它的插入方式，那么第一个参数   CodeMirror函数也可以是一个函数，当给出一个   DOM元素，将其插入文档中的某个位置。这可能是   例如，习惯用真正的编辑器替换textarea：

var myCodeMirror = CodeMirror（function（elt）{
  myTextArea.parentNode.replaceChild（elt，myTextArea）; }，{value：   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控件派生，控制器此时没什么特别的。无论语言选择框被更改多长时间，有关如何实现单个CodeMirror编辑器的任何想法都会出现？

Answer 1

你只需要调用fromTextArea ONCE （每个文本区域）。

因此，创建它，将其存储起来，并在以后需要更改时使用它。

val count =topNUrl.foreachRDD { rdd => 
                      rdd.count()
}

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

1 个答案: