ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

react中codemirror的基本使用

2020-06-15 12:04:57  阅读:567  来源: 互联网

标签:基本 js react fold import codemirror css addon


 

  codemirror是什么?

  使用JavaScript为浏览器实现的多功能文本编辑器。

 

  codemirror作用

  专门用于编辑代码,并带有实现更高级编辑功能的多种语言模式和附加组件。

 

  codemirror官网

  https://codemirror.net/  (全英文,我这种英语渣渣是直接谷歌翻译的,大家不要学我)

  https://www.npmjs.com/package/react-codemirror2  (react-codemirror2官网)

 

  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补充说明

  本地不需要在单独新建对应目录结构和本地下载codemirrorcss,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.全屏展示   
import 'codemirror/addon/display/fullscreen.css';
  import 'codemirror/addon/display/fullscreen.js';

    option={{
       fullScreen: true
    }}

 

 

  

 

  

  

  

  

  

标签:基本,js,react,fold,import,codemirror,css,addon
来源: https://www.cnblogs.com/tu-0718/p/13129860.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有