CodeMirror markText不起作用

时间:2016-03-16 22:27:44

标签: javascript codemirror codemirror-modes ui-codemirror

我正在使用这样的CodeMirror来向用户显示一些XML响应。

HTML CODE

<body>
    <textarea id="cm" >#{bean.xmlResponse}</textarea>
</body>

JS CODE

window.onload = function () {              
    var editor = CodeMirror.fromTextArea(document.getElementById('cm'), {
                    mode: "xml",
                    theme: "default"
                });

    editor.getDoc().markText({line:5,ch:2},{line:5,ch:9},"color : red");
};

现在,当我试图通过使用无法正常工作的markText突出显示某个特定行时。当然&#34; xml&#34;模式正在运行,但第5行未突出显示为红色。

我非常感谢你的帮助。我试图完成它已经过了3天。感谢。

1 个答案:

答案 0 :(得分:6)

您需要将options参数指定为地图,而不是字符串:{css: "color : red"}

有关详细信息,请参阅文档:https://codemirror.net/doc/manual.html#markText

这是一个基于您的示例的片段,显示它正如您所描述的那样工作(您可以忽略不必要的CSS / JS设置以及需要运行代码段的示例xml):

var editor = CodeMirror.fromTextArea(document.getElementById('cm'), {
  mode: "xml",
  theme: "default"
});

editor.getDoc().markText({
  line: 5,
  ch: 10
}, {
  line: 5,
  ch: 39
}, {
  css: "color : red"
});
@import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.12.0/codemirror.css"
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.12.0/codemirror.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.12.0/mode/xml/xml.js"></script>
<textarea id="cm">
  <note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>

    <body>Don't forget me this weekend!</body>
  </note>
</textarea>