编辑器CodeMirror整理

英文太难了，真的太难了（哭），最近使用CodeMirror比较多，所以做如下总结，方便以后查看

第一步：官网下载CodeMirror文件

不告诉你的小秘密：查看下载中demo的文件夹，不看文档也可以快速实现你想要的效果

第二步：在使用前必须先引用

第三步：根据使用需求引用对应的css和js
譬如主题：

譬如sql自动补全:

第四步：构造editor，根据需要对CodeMirror进行参数配置，以下只列出常用参数

var createSql = $('[data-mark="insert_sql"]')
editor = CodeMirror.fromTextArea(createSql[0], {
   
   mode: "text/x-sql",
   
   theme: 'seti',
   
   lineWrapping: true,

   
   lineNumbers: true,
   
   firstLineNumber: 1,

   
   indentWithTabs: true,
   
   smartIndent: true,

   
   matchBrackets : true,
   
   autofocus: true,
   
   extraKeys: {"Ctrl-Space": "autocomplete"},
   
   readOnly:'nocursor',
   
   showCursorWhenSelecting:true

})

第五步：CodeMirror的取值(getValue)和赋值(setValue)

editor.getValue()
editor.setValue("value")

其它：
1、自定义编辑器大小(在css文件中给.CodeMirror定义即可)

.CodeMirror{
  border:1px solid black;
  font-size:15px;
  width:600px;
  height:400px
}

2、构造editor后，编辑器属性的获取和赋值

editor.getOption("theme")
editor.getOption("theme","seti")

3、extraKeys中自定义快捷键

extraKeys:{
   "Ctrl-Space":"autocomplete",
   "Ctrl-F7":function () {console.log("自定义事件");},
}

参考资料

以上若没有解决问题，可点击这里

查看更多参数配置请点击这里