CodeMirror使用小结

拼搏现实的明天。 2022-05-14 01:35 528阅读 0赞

CodeMirror可以在线编辑代码，风格包括js, java, php, c++等等100多种语言。比较强大可以自行配置语言模式。能够做到自动补全，代码折叠，可配置键盘事件，vim， emacs， sublime  text 风格、能完成查找替换，括号匹配，分栏显示，显示行号，自行配置字体大小和风格，等等等等。。。

官网地址如下： [https://codemirror.net/index.html][https_codemirror.net_index.html]   使用前下载插件，文件夹结构如下

![70][]

1、最最基本功能，需引入codemirror.js和codemirror.css文件， 如下：

2、通过调用CodeMirror.fromTextArea（）方法或者 CodeMirror（）方法初始化配置。(更多配置见官网)

2.1 通过CodeMirror.fromTextArea（），通过HTML中的<textarea>标签

*注意： 1> 要实现什么风格的，就要引入改风格的  js  文件，例如 java需要引入 mode/clike/clike.js文件。所有语言风格的  js 文件都存放在mode文件夹中，按需引入即可*

*                  2>以下配置的属性，大多都需要将对应插件引入后才能使用（codemirror麻烦的地方，需要引入大量的文件）*

let editor = CodeMirror.fromTextArea(document.getElementById("FunctionEditor"), \{

mode: "text/x-java", //实现Java代码高亮

lineNumbers: true,  //显示行号

theme: "darcula", //设置主题

lineWrapping: true, //代码折叠

foldGutter: true,

gutters: \["CodeMirror-linenumbers", "CodeMirror-foldgutter"\],

matchBrackets: true,  //括号匹配

autoCloseBrackets: true,

// showHint: true,

extraKeys:\{"Ctrl-Space":"autocomplete"\}//ctrl-space唤起智能提示

\});

**赋值方法有两种，**

**一种是HTML标签里设置好textarea的value属性，**

**一个是通过`CodeMirror.fromTextArea的`setValue（str）方法设置值**

2.2 通过CodeMirror（），配置方法同上，不需要非得是textarea

var myCodeMirror = CodeMirror(document.body, {
              value: "function myScript(){return 100;}\n",
              mode:  "javascript"
          });

3、保存输入的代码，调用getValue（）方法

[https_codemirror.net_index.html]: https://codemirror.net/index.html
[70]: /images/20220514/947ac2ba5e71452a80964263ae87500f.png