這裏是利用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()