CodeMirror使用小结

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

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

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

<link rel="stylesheet" href="./static/lib/codemirror/lib/codemirror.css" />

<script src="./static/lib/codemirror/lib/codemirror.js"></script>

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（）方法