react antd中codemirror的基本使用

 

　　codemirror是什么？

　　使用JavaScript為瀏覽器實現的多功能文本編輯器。

 

　　codemirror作用

　　專門用於編輯代碼，並帶有實現更高級編輯功能的多種語言模式和附加組件。

 

　　codemirror官網

　　https://codemirror.net/  （全英文，我這種英語渣渣是直接谷歌翻譯的，大家不要學我）

　　https://www.npmjs.com/package/react-codemirror2  （react-codemirror2官網）

　　

　　codemirror和react-codemirror2（針對上面2個codemirror官網，個人淺薄的理解，僅供參考，歡迎指正）

 　   codemirror：不使用任何第三方前端框架時使用

　　react-codemirror2：二次封裝，集成為react中的一個插件，專用於在react中使用

 

　　codemirror安裝

　　npm install codemirror（默認安裝最新版本）

　　npm install react-codemirror2 codemirror --save（react中使用推薦這種安裝方式，下面以這種安裝方式舉例）

 

　　codemirror卸載

　　npm uninstall codemirror

　　npm uninstall react-codemirror2 codemirror --save

 

　　codemirror使用

　　首先從react-codemirror2中引入CodeMirror組件

　　

　　然后引入codemirror核心css,js文件（必須引入）

　　

　　接着引入solarized.css主題和clike代碼模式的文件（可選擇引入喜歡的主題和模式）

　　

　　最后在項目中使用引入的CodeMirror組件並在option中進行相關設置，就可以得到一個基本的代碼編輯器了

　　

　　

 

　　codemirror補充說明

　　本地不需要在單獨新建對應目錄結構和本地下載codemirror的css,js代碼，

　　因為安裝codemirror后早已在node_module中，所以import對應文件的路徑如下即可，

　　addon: 其它功能插件  lib：核心css,js

　　mode: 代碼編輯模式   theme: 主題樣式

　　

 

　　codemirror其它幾個常用功能設置

　　1.編輯器左側顯示行號

　　

　　option={{
     lineNumbers: true
　　}}

　　

　　2.自動獲取焦點

　　

　　option={{
    　　autofocus: true
　　}}

 

　　3.光標行代碼高亮

　　

　import 'codemirror/addon/selection/active-line';

　　option={{

    　　styleActiveLine: true
　　}}

 

　　 4.折疊代碼

　　

　　

　　import 'codemirror/addon/fold/foldgutter.css'; 
　　import 'codemirror/addon/fold/foldcode.js';
　　import 'codemirror/addon/fold/foldgutter.js';  
　　import 'codemirror/addon/fold/brace-fold.js';  
　　import 'codemirror/addon/fold/comment-fold.js';

 　　options={{
             lineWrapping: true, 
             foldGutter: true,
             gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
         }}

 

　　5.代碼提示補全（按ctrl+空格鍵即可調出，可自定義配置快捷鍵）

　　

　　import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代碼提示補全
　　import 'codemirror/addon/hint/show-hint.js'; 
　　import 'codemirror/addon/hint/anyword-hint.js'; // end 

　　 option={{
    　　extraKeys: { "Ctrl": "autocomplete" }
　　}}

 

　　6.設置代碼語言模式（比如c，c++，python，java等）

import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/xml/xml.js';
import 'codemirror/mode/python/python.js';
import 'codemirror/mode/perl/perl.js';
import 'codemirror/mode/clike/clike.js';

option = {{
    mode: { 
        name: "text/x-csrc",
        name: "text/x-c++src",
        name: "text/x-cython",
        name: "text/x-java"
    }
}}

　　注：上面mode分別設設置的代碼模式為c，c++，python，java，跟我們想象種的設置不太一樣，參考

 

　　 7. 全屏展示

　　

import 'codemirror/addon/display/fullscreen.css';
　　import 'codemirror/addon/display/fullscreen.js';

 　  option={{
     　 fullScreen: true
　   }}