这里是利用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()
CodeMirror的使用方法
点赞
收藏