【CodeMirror】在线代码编辑器的基础库

CodeMirror 是一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库

1.第一步安装                            

npm install vue-codemirror --save

2.在main中引入

import VueCodemirror from 'vue-codemirror'
Vue.use(VueCodemirror);

3.引入后在html界面中建立textarea标签，用于生成代码框

<textarea class="form-control" id="codes" name="code"></textarea>

　4.根据textarea的id获取到标签元素，将容器转换为编辑器

this.editor = CodeMirror.fromTextArea(document.getElementById('codes'), {
  mode:"python",// 语言模式
  theme:"leetcode",// 主题
  keyMap:"sublime",// 快键键风格
  lineNumbers:true,// 显示行号
  smartIndent: true , //智能缩进
  indentUnit: 4, // 智能缩进单位为4个空格长度
  indentWithTabs:true,  // 使用制表符进行智能缩进
  lineWrapping:true,//
  // 在行槽中添加行号显示器、折叠器、语法检测器`
  gutters: ["CodeMirror-linenumbers","CodeMirror-foldgutter","CodeMirror-lint-markers"],
  foldGutter:true, // 启用行槽中的代码折叠
  autofocus:true,  / /自动聚焦
　 matchBrackets:true,// 匹配结束符号，比如"]、}"
  autoCloseBrackets: true , // 自动闭合符号
  styleActiveLine:true, // 显示选中行的样式
});

5.初始化编译器时可设置属性：

value:初始内容
Mode:设置编译器编程语言关联内容，对应的mine值
Theme:编译器的主题，需要引入对应的包
tabSize：tab的空格宽度
lineNumbers：是否使用行号
smartIndent：自动缩进是否开启
indentUnit：缩进单位
keyMap：快捷键，default使用默认快捷键，除此之外包括emacs，sublime，vim快捷键，使用需引入工具

　　

 

 

注释：

参考文章：https://www.niwoxuexi.com/blog/xiaozhu/article/1228

参考文章：https://www.jianshu.com/p/52683780c76e