1、什么是CodeMirror ?

CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。 它专门用于编辑代码,并带有实现更高级编辑功能的多种语言模式和附加组件。

2、如何接入CodeMirror ?

2.1 普通接入

CodeMirror官网提供了接入示例代码如下:

#页面引入相关文件
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
<!-- 使用脚本 -->
<script>
  var editor = CodeMirror.fromTextArea(document.getElementById("textarea"), {
    lineNumbers: true,
    mode:'javascript'
  });
</script>

2.2 Require.js接入

首先配置require

require.config({
  packages: [{
    name: "codemirror",
    location: "../path/to/codemirror",
    main: "lib/codemirror"
  },
  {
    name: "javascript",
    location: "../path/to/codemirror/mode/javascript",
    main: "javascript"
  }
 ]
});

修改mode文件夹下的语言文件,这里我们以javascript为例子

文件路径为:../path/to/codemirror/mode/javascript/javascript.js

将原代码

(function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
    mod(require("../../lib/codemirror"));
  else if (typeof define == "function" && define.amd) // AMD
    define(["../../lib/codemirror"], mod); # 修改前 
  else // Plain browser env
    mod(CodeMirror);
})...

修改为如下

(function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
    mod(require("../../lib/codemirror"));
  else if (typeof define == "function" && define.amd) // AMD
    define(["codemirror"], mod); # 修改后
  else // Plain browser env
    mod(CodeMirror);
})...

最后我们这样调用即可

require([
  "codemirror", "javascript"
], function(CodeMirror) {
  CodeMirror.fromTextArea(document.getElementById("textarea"), {
    lineNumbers: true,
    mode: "javascript"
  });
});

现在编辑代码高亮了,其他组件接入类似。

码农之家