多种模式代码镜像

Multiple modes Codemirror

本文关键字：镜像 代码 模式      更新时间：2023-11-07

我希望我的TextArea能够支持多种CodeMirror模式。现在我希望它支持json和xml。这可能吗？此外，是否可以自动检测用户在该区域中放置了json或xml？

谢谢。

CodeMirror实际上有一个非常接近您在这里寻找的示例。

这里有一个更具体的例子，可以做你想做的事。

  1. 创建CodeMirror实例
  2. 当内容发生变化时，我们决定是否应该切换模式

我为确定您所处的模式而输入的逻辑非常简单，可以进行重构，以支持您认为适合任何一种模式的健壮检查。（如果你想了解，Regex非常适合复杂的检查……这是我使用它的唯一原因，即使在我的简单示例中也是如此）目前，我的示例代码只检查第一个非空格字符为"<"的任何内容，从而指示xml模式。当决定切换回时，它只检查第一个非空格字符是否不是"<"，并且它不是空的（以防用户删除所有内容以重新开始使用更多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>
相关文章：