CodeMirror在線代碼編輯器使用以及如何取值

目前CodeMirror在線代碼編輯器在運用還蠻廣泛的，支持100多種語言，高度可定制。支持語言有C、C++、C#、Java、Perl、HTML、CSS、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等。以及diff、LaTeX、SQL、wiki、Markdown等文件格式。CodeMirror為各種編程語言實現關鍵字、函數、變量等代碼高亮顯示，豐富的API和可擴展功能以及多個主題樣式。如果要在頁面中需要嵌入一個代碼編輯區，CodeMirror是最佳的選擇。

關於下載可以直接到官網上去下載

CodeMirror的官網是：http://codemirror.net/

代碼托管在Github上，下載地址：https://github.com/codemirror/CodeMirror/archive/master.zip

下面是需要引入的css

<link href="codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">//必須引入，是CodeMirror的核心樣式文件
<link href="codemirror/theme/monokai.css" rel="stylesheet" type="text/css">//是編輯器模板，可以根據需要修改
<link href="codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">//全屏支持樣式文件

<script type="text/javascript" src="codemirror/lib/codemirror.js"></script>//需要引入的核心js

頁面展示：

<textarea id="code" name="code"></textarea>

關於配置：

 <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,     // 顯示行數
        indentUnit: 4,         // 縮進單位為4
        styleActiveLine: true, // 當前行背景高亮
        matchBrackets: true,   // 括號匹配
        mode: 'htmlmixed',     // HMTL混合模式
        lineWrapping: true,    // 自動換行
        theme: 'monokai',      // 使用monokai模版
    });
</script>　　

當然，配置項有很多，以上只是一部分，具體的配置項內容可以參考官網，有很多，可以酌情使用。

接下來就是項目中運用到比較多的情況說明：

1. 設置代碼框的大小

   editor.setSize('800px', '950px'); 

2. 獲取編輯器的內容

   editor.getValue();
   //僅僅單純獲取編輯器的文本內容，不能識別換行及一些特殊符號的轉義

3. 給編輯器賦值

   editor.setValue("");　　

以上的幾種做法都沒辦法滿足我當時在項目中遇到的問題就是：要取出代碼編輯器的內容傳給服務端，而且服務端還要將我傳的內容再返給我供頁面初始化值用，但是因為getValue取出的內容是不能轉義甚至不能識別換行，導致報錯，所以我要將編輯器取到的內容顯示再textarea里面。於是即是：

<textarea id="funAttri" >${item.funAttri!}</textarea>
//因為我用的beetl模板，所以可以直接讀取后台穿的值${item.funAttri!}　　　

 先將編輯器設置內容，而這個內容就是服務端傳過來的

editor.setValue($("#funAttri").html());

這個時候直接取出編輯器的內容即可：

 editor.save();//同步CodeMirror的數據到textarea（這一步至關重要）
 var funattri = $("#funAttri").val();//直接取出即可，之后可以作為內容再次提交給服務端

好了，以上便是我所遇到的問題，其實最關鍵的一步就是將value值同步到textarea里面，這樣取出的就是html了