[轉]CodeMirror 使用大全

(轉載請刪除括號里的內容)

CodeMirror是一個用於編輯器文本框textarea代碼高亮javascript插件，為各種編程語言實現關鍵字，函數，變量等代碼高亮顯示，豐富的api和可擴展功能以及多個主題樣式，能滿足您各種項目的需求。

CodeMirror支持大量語言的語法高亮，包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等，以及diff、LaTeX、SQL、wiki、Markdown等文件格式。此外，CodeMirror還支持代碼自動完成、搜索/替換、HTML預覽、行號、選擇/搜索結果高亮、可視化tab、Emacs/VIM鍵綁定、代碼自動格式等。

CodeMirror采用MIT開源許可協議，目前已經被集成到各種應用程序中，如Adobe Brackets、CoDev、Light Table等開發環境，還被作為各種SQL、Haxe、JavaScript在線編輯器的基礎庫來使用。

CodeMirror開發者近日發布了3.0版本。該版本進行了一些改進，如果你使用之前的版本，則需要注意，3.0中的API與2.0存在一些不兼容的問題，詳細信息見升級向導。此外，重要的是，3.0放棄了對IE7的支持。

 

使用方法

本文將做簡單的介紹，如何使用CodeMirror插件和提交表單。

引入核心文件

1. <link rel="stylesheet" href="lib/codemirror.css">
2. <script src="lib/codemirror.js"></script>

codemirror.css和codemirror.js文件是CodeMirror插件的核心文件，無論你要高亮的代碼是何種語言，都要引入這兩個文件。

引入代碼高亮js

接下來要引入的文件可以根據您的項目需求引入，不必要引入所有文件，比如您要顯示html代碼，則引入：

1. <script src="xml.js"></script>

代碼調用

1. <script>
2. myTextarea = document.getElementById("code");
3.   var editor = CodeMirror.fromTextArea(myTextarea, {
4.     mode: "text/html"
5.   });
6. </script>

myTextarea為您的編輯器dom元素ID，一般使用document.getElementById(“code”)方法獲取文本框，如果您使用的jquery，那么需要在代碼后面加入[0]，比如$(‘#code’)[0]；

獲取Codemirror的值

1. //該方法得到的結果是經過轉義的數據
2. editor.getValue();

1. //該方法得到的結果是未經過轉義的數據
2. editor.toTextArea();
3. editor.getTextArea().value;

如果是通過 JS 進行表單提交，可以在提交的 JS 代碼中這樣使用：

1. //將 Codemirror 的內容賦值給 Textarea
2. $("#content").text(editor.getValue());

Codemirror賦值

　　1.editor.setValue('為codemirror賦值');

Codemirror  Events  change事件

 　　主要代碼　

　　Editor.on("change", function (Editor, changes) {

　　　　　　while (changes) {

　　　　　　Editor1.replaceRange(changes.text.join("\n"), changes.from, changes.to);

　　　　　　changes = changes.next;

 　　　　}

　　});

changes.next 不是每次change事件都會有

 

 

項目地址：http://codemirror.net/

在線使用手冊：http://codemirror.net/doc/manual.html

github地址：https://github.com/marijnh/codemirror

---------------------
作者：onlyone1221
來源：CNBLOGS
原文：https://www.cnblogs.com/onlyonely/p/4450029.html
版權聲明：本文為作者原創文章，轉載請附上博文鏈接！
內容解析By：CSDN,CNBLOG博客文章一鍵轉載插件