选择语言下拉菜单时，CodeMirror会继续追加 [英] CodeMirror keeps appending when language dropdown is selected
问题描述
我正在使用CodeMirror为一个小项目提供语法高亮显示，以节省编程部门的代码位。
asp-mvc页面由一个textxt，一个用于语言的下拉列表，一个用于描述的文本框和一个用于代码的文本框组成。
当用户从下拉列表中进行第一选择时，将创建一个不错的Codemirror编辑器。如果他们要更改语言选择，则会在第一个框的上方创建一个NEW CodeMirror框并将其放在前面。每次进行选择时都会继续执行此操作，从而导致盒子堆叠并变得混乱。我一直想要一个Codemirror编辑器。例如，如果要键入文本，然后决定选择语言，则应将文本复制到新的CodeMirror编辑器中。
这是手册中的说明：
I am using CodeMirror to provie syntax highlighting for a little project to save programming departments code bits. The asp-mvc page consists of a textxt, a dropdown list for languages, a textbox for a description and a textbox for code. when the user makes his/her first selection from the dropdown, a nice Codemirror editor is created. If they were to make change the language selection, a NEW CodeMirror box is created and pre-pended above the first box. this goes on each time a selection is made, causing the boxes to stack and become confusing. I would like a single Codemirror editor at all times. If they were to type in text, for instance, then decide to choose languages, the text should just be copied over to a new CodeMirror editor. Here is a description of how to do this in the manual:
如果您不想将编辑器附加到元素上，并且需要对其插入方式进行更多控制，则第一个参数$ b CodeMirror函数的$ b也可以是当给定
DOM元素时将其插入文档中某个位置的函数。例如，这可能是
，用于用真正的编辑器替换文本区域：
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}）;但是，对于这种用例，这是使用CodeMirror的常见方式
，该库提供了更强大的快捷方式：
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）;
除其他外，这将确保在提交
表单（如果它是表单的一部分）时，textarea的值更新为
编辑者的内容。
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：
as you will see in my code, I am using the second method, but to no avail. Heres the markup and 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编辑器的任何想法都会出现？
The model is simple and can be derived from the Razor controls, controller does nothing special at this time. Any ideas out there on how I can accomplish having a single CodeMirror Editor appear no matter how many time the language selection box is changed?
推荐答案
您只需要从文本区域调用
You only need to call fromTextArea ONCE ever (per text area).
因此创建它，将其存储起来，并在以后需要更改时使用它。
So create it, store it off, and use it if you need to change anything later.
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会继续追加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
