CodeMirror的下载与简单使用

Web前端 潘老师 4个月前 (01-19) 148 ℃ (0) 扫码查看

最近潘老师在搭建程序员在线工具箱时,需要一款能显示行号带有代码高亮效果的编辑器,后来发现CodeMirror正好满足了这一需求,而且功能非常强大,使用也很方便,支持多主题效果。下面潘老师来介绍下CodeMirror的下载与简单使用。

一、CodeMirror是什么?

CodeMirror是一个代码编辑器组件,可以嵌入到Web页面中。核心库仅提供编辑器组件,不提供伴随按钮,自动完成或其他IDE功能。它确实提供了丰富的API,在此基础上可以直接实现这些功能。

说得直白点,CodeMirror就是js+css开发出来的一款代码编辑器,能实现较好得代码显示效果,能实现多主题切换,使用方式也是很简单的。

二、CodeMirror如何下载?

可以直接到CodeMirror官网首页的进行下载。npm安装可以使用如下指令:

#安装
npm install codemirror
#导入
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'

三、CodeMirror如何简单使用?

npm的使用就不具体介绍了,下面我们简单说下纯js的使用方式。下载好后,我们只需简单的引入相关的js和css文件即可使用,简单案例如下:

//核心js和css
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
// mode js
<script src="mode/htmlmixed/htmlmixed.js"></script>
// 代码
<textarea id="code" style="display:none"></textarea>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { // 标识到textarea
    lineNumbers: true,//显示行号
    mode : "text/html",  // 模式,这里指定html
    // 还有很多...
  });
</script>

四、初始化CodeMirror编译器时可设置属性

  • value:初始内容
  • mode:设置编译器编程语言关联内容,对应的mine值
  • theme:编译器的主题,需要引入对应的包
  • tabSize:tab的空格宽度
  • lineNumbers:是否使用行号
  • smartIndent:自动缩进是否开启
  • indentUnit:缩进单位
  • keyMap:快捷键,default使用默认快捷键,除此之外包括emacs,sublime,vim快捷键,使用需引入工具对应的js,都在keymap目录下.
  • scrollbarStyle: 设置滚动条,默认为”null”为不显示的滚动条,可以使用提供的其他滚动条:“simple”,”overlay”选择内侧与外侧的滚动条,使用需引入以下工具包:addon/scroll/simplescrollbars.jsaddon/scroll/simplescrollbars.css
  • readOnly:设置为只读true/false;也可设置为”nocursor”失去焦点
  • Autofocus:初始时是否自动获取焦点boolean
  • styleActiveLine: 设置光标所在行高亮true/false,需引入工具包:addon/selection/active-line.js
  • 还有触发事件,类似change、blur等等

更具体的请参考官方文档属性配置信息

五、CodeMirror如何使用主题?

一般CodeMirror的默认主题不好看,我们需要使用一些其他主题样式,比如idea、eclipse、dracula等等主题,使用方式也很简单。只要导入theme包下的对应的css样式文件,再在配置中指定theme:'主题名'属性即可。例如我使用idea的主题:

//核心js和css
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
// mode js
<script src="mode/htmlmixed/htmlmixed.js"></script>
<link rel="stylesheet" href="theme/idea.csss">
//  代码
<textarea id="code" style="display:none"></textarea>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { // 标识到textarea
    lineNumbers: true,//显示行号
    mode : "text/html",  // 模式,这里指定html
    theme: "idea" // 指定主题为idea
  });
</script>

全部主题效果请参考官方文档,如下是mode为javascript,theme为idea的效果图:
CodeMirror的下载与简单使用

六、CodeMirror如何指定其他mode?

CodeMirror支持的mode语言包有很多种,都在mode目录下,比如除了html,还有sql、php、javascript、go、xml等等,比如潘老师的程序员工具箱的xml格式化压缩就使用了xml的mode,去看看效果
因此想要指定其他mode,只需导入mode下对应的js,再指定mode属性值即可。

到这里,想必CodeMirror的下载与简单使用你应该会了吧~


版权声明:本站所有文章,如无特殊说明,均为本站原创。转载请务必注明文章来源,谢谢支持。
本文链接:https://www.panziye.com/java/web/4139.html
喜欢 (1)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】