Home/ Questions/Q 8951677
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T13:43:10+00:00

I want my TextArea to be able to support multiple CodeMirror modes. For now

  • 0

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?

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    1. Create a CodeMirror instance.
    2. When the content changes we determine if we should switch modes.

    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>
    • 0