codemirror用法

codemirror用法

发布:2018-05-02 00:07:02

##初始化在线编辑器
<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

查询时间：25.081ms

渲染时间：25.206ms

本文同步分享在 博客“zhenruyan”（other）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。