codemirror用法

Posted 76 months ago codemirror用法

##初始化在线编辑器
<link rel="stylesheet" href="/js/codemirror/lib/codemirror.css">
<script src="/js/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="/js/codemirror/addon/selection/active-line.js"></script>
<script type="text/javascript" src="/js/codemirror/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="/js/codemirror/addon/display/fullscreen.js"></script>
<script type="text/javascript" src="/js/codemirror/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="/js/codemirror/theme/eclipse.css">
<link rel="stylesheet" href="/js/codemirror/addon/fold/foldgutter.css"/>
<script src="/js/codemirror/addon/fold/foldcode.js"></script>
<script src="/js/codemirror/addon/fold/foldgutter.js"></script>
<script src="/js/codemirror/addon/fold/brace-fold.js"></script>
<script src="/js/codemirror/addon/fold/comment-fold.js"></script>
<link rel="stylesheet" href="/js/codemirror/addon/lint/lint.css">
<script src="/js/jsonlint.js"></script>
<script src="/js/codemirror/addon/lint/lint.js"></script>
<script src="/js/codemirror/addon/lint/json-lint.js"></script>
<script src="/js/beautify.min.js"></script>



 //初始化编辑器
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()))
	}e

点击评论