4

TextAreaで複数のCodeMirrorモードをサポートできるようにしたいと思います。今のところ、jsonとxmlをサポートしたいと思います。これは可能ですか？また、ユーザーがその領域にjsonまたはxmlを配置したかどうかを自動的に検出することは可能ですか？

ありがとう。

4

1 に答える 1

4

CodeMirrorには、実際にここで探しているものに非常に近い例があります。

これがあなたが望むことをするより具体的な例です。

  1. CodeMirrorインスタンスを作成します。
  2. コンテンツが変更されたら、モードを切り替える必要があるかどうかを判断します。

現在のモードを判別するために私が入れたロジックは非常に単純であり、どちらのモードにも適切であるとみなすのと同じくらい堅牢なチェックをサポートするようにリファクタリングできます。（正規表現は、凝ったものにしたい場合の複雑なチェックに適しています...それが私の単純な例でも使用した唯一の理由です）現在、私のサンプルコードは、最初の非スペース文字が「<」であるコンテンツをチェックするだけです。 "したがって、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>
于 2012-12-07T22:05:22.700 に答える