多种模式Codemirror [英] Multiple modes Codemirror
问题描述
我希望我的TextArea能够支持多种CodeMirror模式.现在，我希望它支持json和xml.这可能吗? 另外，是否可以自动检测用户是否在该区域中放置了json或xml?
I want my TextArea to be able to support multiple CodeMirror modes. For now I want it to support json and xml. Is this possible? Also, is it possible to automatically detect whether the user placed json or xml in the area?
谢谢.
推荐答案
CodeMirror实际上有一个非常接近您要查找的示例的此处.
CodeMirror actually has an example very close to what you are looking for here.
这是一个更具体的示例，可以满足您的要求.
Here is a more specific example that does what you want.
- 创建CodeMirror实例.
- 当内容更改时，我们确定是否应该切换模式.
我用来确定您处于哪种模式的逻辑非常简单，可以重构为支持您认为适合于任何一种模式的健壮检查. (正则表达式非常适合进行复杂的检查，如果您想花哨的话……这就是我在简单示例中使用它的唯一原因)当前，我的示例代码仅检查第一个非空格字符为< ;因此指示xml模式.决定切回时，只需检查第一个非空格字符是否不是<"即可.并且它不是空白(以防用户只是删除所有内容以重新添加更多xml).
The logic I put in for determining what mode you are in is very simplistic and can be refactored to support as robust a check as you deem appropriate for either mode. (Regex is good for complex checking if you want to get fancy...that is the only reason I used it even in my simple example) Currently, my example code just checks for any content where the first non-space character is "<" thus indicating xml mode. When deciding to switch back it just checks that the first non-space character is not "<" and that it is not blank (in case the user just deleted everything to start over with more xml).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Code Mirror Example</title>
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
<script src="mode/xml/xml.js"></script>
<style type="text/css">.CodeMirror{border:1px solid black;}</style>
</head>
<body>
<div><span>Mode: </span><span id="modeType">JSON</span></div>
<textarea class='codeEditor'></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function determineCodeMirrorType(cm)
{
if (cm.getMode().name == 'javascript')
{
checkAndSwitchToXML(cm, cm.getValue());
}
else if (cm.getMode().name == 'xml')
{
checkAndSwitchToJSON(cm, cm.getValue());
}
}
function checkAndSwitchToXML(cm, val)
{
if (/^\s*</.test(val))
{
cm.setOption("mode", "xml");
$('#modeType').html("XML");
}
}
function checkAndSwitchToJSON(cm, val)
{
if (!/^\s*</.test(val) && val.match(/\S/))
{
cm.setOption("mode", "javascript");
$('#modeType').html("JSON");
}
}
function buildCMInstance(mode, value)
{
var cm = CodeMirror.fromTextArea($('.codeEditor')[0], {
mode:mode,
value:value,
lineNumbers:true,
onChange:function(cmInstance){
determineCodeMirrorType(cmInstance);
}
});
return cm;
}
$(document).ready(function(){
//mode changing demo: "http://codemirror.net/demo/changemode.html";
var cm = buildCMInstance("javascript");
});
</script>
</body>
</html>
这篇关于多种模式Codemirror的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
