多種模式Codemirror

我希望我的TextArea能夠支持多種CodeMirror模式。現在我希望它支持json和xml。這可能嗎？另外，是否可以自動檢測用戶是否在該區域中放置了json或xml？多種模式Codemirror

謝謝。

2012-07-18 cclerville

CodeMirror實際上有一個非常接近你正在尋找的例子here。

下面是一個更具體的例子，你想要什麼。

創建一個CodeMirror實例。
當內容發生變化時，我們確定是否應該切換模式。

我用來確定您所處的模式的邏輯非常簡單，可以重構爲支持您認爲適用於任一模式的可靠檢查。（正則表達式對於複雜檢查是很好的，如果你想變得很花哨......這是我使用它的唯一原因，即使在我的簡單例子中）目前，我的示例代碼只檢查任何內容，其中第一個非空格字符是「< 「因此表示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-07 22:05:22 purgatory101

多種模式Codemirror

回答

相關問題