CodeMirror可以在线编辑代码,风格包括js, java, php, c++等等100多种语言。比较强大可以自行配置语言模式。能够做到自动补全,代码折叠,可配置键盘事件,vim, emacs, sublime text 风格、能完成查找替换,括号匹配,分栏显示,显示行号,自行配置字体大小和风格,等等等等。。。
官网地址如下: https://codemirror.net/index.html 使用前下载插件,文件夹结构如下
1、最最基本功能,需引入codemirror.js和codemirror.css文件, 如下:
2、通过调用CodeMirror.fromTextArea()方法或者 CodeMirror()方法初始化配置。(更多配置见官网)
2.1 通过CodeMirror.fromTextArea(),通过HTML中的
注意: 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()方法