CodeMirror的下载与简单使用

最近潘老师在搭建程序员在线工具箱时，需要一款能显示行号带有代码高亮效果的编辑器，后来发现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.js和addon/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如何指定其他mode？

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

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

喜欢 (2)赏

【请潘老师喝杯Coffee吧！】

分享 (0)