CodeMirror的使用方法


這里是利用vue來開發項目:
1、利用textare生成編輯器
 <textarea ref="textarea"></textarea>

2、創建編輯器對象
 let editJson = CodeMirror.fromTextArea(this.$refs.textarea, {
    mode: 'application/json', // json數據高亮
    lineNumbers: true, // 顯示行號
    theme: 'eclipse', //設置主題
    lineWrapping: 'wrap', // 文字過長時,是換行(wrap)還是滾動(scroll),默認是滾動
    showCursorWhenSelecting: true, // 文本選中時顯示光標
    cursorHeight: 0.85, //光標高度,默認是1
    // 代碼折疊
    lineWrapping: true,
    foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
    matchBrackets: true, // 括號匹配
    smartIndent: true, // 智能縮進
    // 智能提示
    extraKeys:{
        "Alt-/": "autocomplete", "F11": function (cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        }
    }
 });
 // 設置初始值
 editJson.setValue("輸入代碼\n")
 // 獲取編輯器的值
 editJson.getValue()

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM