CodeMirror使⽤⼩结
CodeMirror可以在线编辑代码，风格包括js, java, php, c++等等100多种语⾔。⽐较强⼤可以⾃⾏配置语⾔模式。能够做到⾃动补全，代码折叠，可配置键盘事件，vim， emacs， sublime  text 风格、能完成查替换，括号匹配，分栏显⽰，显⽰⾏号，⾃⾏配置字体⼤⼩和风格，等等等等。。。
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.ElementById("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,
textstyleextraKeys:{"Ctrl-Space":"autocomplete"}//ctrl-space唤起智能提⽰          });
赋值⽅法有两种，
⼀种是HTML标签⾥设置好textarea的value属性，
⼀个是通过的setValue（str）⽅法设置值
2.2 通过CodeMirror（），配置⽅法同上，不需要⾮得是textarea
var myCodeMirror = CodeMirror(document.body, {
value: "function myScript(){return 100;}\n",
mode:  "javascript"
});
3、保存输⼊的代码，调⽤getValue（）⽅法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。