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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。