js的在线编辑器codemirror

Posted 76 months ago javascript code codemirror ide 编辑器

##初始化在线编辑器
codemirror.css
codemirror.js
/js/codemirror/addon/selection/active-line.js
/js/codemirror/addon/edit/matchbrackets.js
/js/codemirror/addon/display/fullscreen.js
/js/codemirror/mode/javascript/javascript.js
/js/codemirror/theme/eclipse.css
/js/codemirror/addon/fold/foldgutter.css
/js/codemirror/addon/fold/foldcode.js
/js/codemirror/addon/fold/foldgutter.js
/js/codemirror/addon/fold/brace-fold.js
/js/codemirror/addon/fold/comment-fold.js
/js/codemirror/addon/lint/lint.css
/js/jsonlint.js
/js/codemirror/addon/lint/lint.js
/js/codemirror/addon/lint/json-lint.js
/js/beautify.min.js



 //初始化编辑器
	var editor = CodeMirror.fromTextArea(document.querySelector(".inputrule"), {
		lineNumbers: true,     // 显示行数
		indentUnit: 4,         // 缩进单位为4
		styleActiveLine: true, // 当前行背景高亮
		matchBrackets: true,   // 括号匹配
		mode:"application/json", // HMTL混合模式
		lineWrapping: true,    // 自动换行
		theme: 'eclipse',      // 使用模版
		lineWrapping:true,//支持折叠
		foldGutter: true,
		lint: true

	});
	editor.setSize('auto','auto');
	CodeMirror.commands.autocomplete = function(cm) {
		cm.showHint({hint: CodeMirror.hint.anyword});
	};
	jsons=$rulejson
	editor.setValue(JSON.stringify(jsons))
	format();
	function format() {
		editor.setValue(js_beautify(editor.getValue()))
	}

点击评论