前言

? ? ? ? CodeMirror是一款支持在線的支持語法高亮的代碼編輯器。功能強(qiáng)大，支持多種語言，由于公司的需要便花了點(diǎn)時(shí)間研究，通過網(wǎng)上的介紹教程大致明白了使用方法，卻發(fā)現(xiàn)大多數(shù)教程并不是特別詳細(xì)的介紹具體的使用，當(dāng)然由于CodeMirror編輯器的功能強(qiáng)大，具體的功能都要一一詳細(xì)介紹是需要花費(fèi)很大精力的，每個(gè)人都是因?yàn)樾枰湃ナ褂?，我也不為過。在這里，我也只介紹我需要我接觸到的部分功能，爭取盡量講解詳細(xì)，幫助到大家。

CodeMirror具體使用

1，官網(wǎng)網(wǎng)址

2，插件代碼

? ? ? ? 代碼下載完后不需要把整個(gè)文件拷貝到項(xiàng)目中，根據(jù)項(xiàng)目的需要把對應(yīng)的文件放置進(jìn)去便可。在整個(gè)文件夾中l(wèi)ib文件是核心代碼和核心樣式；addon/fold目錄下的文件是用來實(shí)現(xiàn)代碼折疊功能；mode文件夾是CodeMirror支持的語言語法定義，具體可以點(diǎn)擊進(jìn)去查看，每一個(gè)語言下都會有個(gè)index.html文件可以查看。theme是用于設(shè)置編輯器的主題。

3，引入主要的文件

? ? ? ? 在html文件中引入核心文件

引入核心css和js

? ? ? ? 其次在根據(jù)項(xiàng)目所需要的功能引入所需的css和js文件
? ? ? ? 實(shí)現(xiàn)代碼折疊引入下列文件(ps:除了樣式css文件必須引入，其他js文件看項(xiàng)目所需引入可以不用全部引入，親測！可自行測試。)

代碼折疊

? ? ? ? 若代碼折疊是根據(jù)Markdown則需多引入下列文件

markdown代碼折疊

? ? ? ? 實(shí)現(xiàn)全屏功能引入下列文件

全屏????????

? ? ? ? 實(shí)現(xiàn)當(dāng)前行背景高亮和括號匹配功能引入下列文件

當(dāng)前行背景高亮和括號匹配

? ? ? ? 實(shí)現(xiàn)搜索功能引入以下文件

搜索

? ? ? ? 接著在html文件中插入textarea節(jié)點(diǎn)

????????在js文件中調(diào)用CodeMirror方法實(shí)現(xiàn)在線編輯器，其中setOption("extraKeys",{})用來設(shè)置快捷鍵。

編輯器基礎(chǔ)參數(shù)配置

?????????實(shí)現(xiàn)merge/diff功能引入以下文件

Merge/Diff

????????在html文件中插入div節(jié)點(diǎn)

????????在js文件中引用CodeMirror的方法

?用angular將CodeMirror使用封裝成指令

????????提醒：有些代碼是根據(jù)需求而寫，有些未必需要，請大家自行判斷。

????????以下代碼及前面所引入的js共同完成的CodeMirror的功能有:

????????<1>Code Folding? ?<2>Search Interface? <3>Merge/diff interface? <4>Full-screen editor

????????(其中有使用foldCode方法是使編輯器默認(rèn)將可折疊的代碼折疊，這是目前所找到的較為繁瑣的方法，如果后續(xù)能夠研究出更為簡易的方法會分享出來給需要的人。)

單純的編輯器

Merge/Diff

圖一

圖二

圖三

最后，如有錯誤或者更好的方法歡迎大家留言告知，看到網(wǎng)上的教程覺得并不是很清晰，便抱著共同進(jìn)步 用最誠摯的心 分享，不喜勿噴，轉(zhuǎn)載者請?jiān)霓D(zhuǎn)載，謝謝。