在线代码编辑器codeMirror

官网链接

• 下载后，解压开得到的文件夹中，lib下是放的是核心库和核心css，mode下放的是各种支持语言的语法定义，theme目录下是支持的主题样式。

1、引用主要文件

<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="/lib/codemirror.css">

2、引用的就是在mode目录下编辑器中要编辑的语言对应的js文件，例如：

<script src="mode/markdown/markdown.js"></script>

3、创建编辑器的容器

<textarea id="editor" name="editor"></textarea>

4、调用脚本并配置参数

var myTextarea = document.getElementById('editor');
var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
    mode: "markdown", //模式 不写时默认被载入的第一个文件
    //[theme demo](http://codemirror.net/demo/theme.html#default)
    theme:"night",
    lineWrapping:false,//文字多时换行还是滚动(true)，默认滚动    
	lineNumbers: true,//左侧显示行号
	//设置gutter跟随编辑器内容水平滚动（false）还是固定在左侧（true或默认）
	fixedGutter:true,
	scrollbarStyle:native,//null隐藏滚动条
	readOnly: boolean|string,
	showCursorWhenSelecting: boolean,//选择时是否显示光标
	autofocus: boolean,//初始化时时候自动获取焦点，默认关闭，textarea自动设为true
	//代码折叠
    lineWrapping:true,
    foldGutter: true,
    gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	fullScreen:true,//全屏
	matchBrackets:true,//括号匹配
	extraKeys:{"Ctrl-Space":"autocomplete"}//ctrl-space唤起智能提示
	styleActiveLine:true,
	styleSelectedText: true
});

5、方法

editor.setOption("lineNumbers",true);//设置属性，属性名-属性值
editor.setValue("value");//设置编辑器中的值
editor.getValue();//获取编辑器中的值
editor.getLine(2);//获取指定行的文本内容
editor.markText({line: num, ch: 0}, {line: num, ch: 400}, {className: "styled-background"});//文本标记
editor.scrollIntoView({line: num, ch:0});//跳转到该行

6、事件

editor.delete();
editor.hide();
editor.unhide();
editor.save();