CodeMirror 在线编辑器


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

官网 https://codemirror.net/

基本功能 引入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 方法设置值

2.2 通过CodeMirror  配置方法同上 不需要非得是textarea
var myCodeMirror = CodeMirror(document.body, {value: "function myScript(){return 100;}n",mode:  "javascript"});

3 保存输入的代码 调用getValue  方法