1234567891011

// 核心文件<link rel="stylesheet" href="../lib/codemirror.css"><script src="../lib/codemirror.js"></script>// 自动补全提示框<script src="../addon/hint/show-hint.js"></script><link rel="stylesheet" href="../addon/hint/show-hint.css">// 左右括号颜色高亮<script src="../addon/edit/matchbrackets.js"></script>

// textarea内是预设的文本<textarea id="editor">123 hello world $aaa$</textarea>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182

// 定义我们需要高亮的关键字const myHighlightList = [    'hello', '你好', '$aaa$']CodeMirror.defineMode('myMode', (config) => { return { /** 这个token方法就是用来标亮关键字的， CodeMirror会自上而下，从左往右得遍历每一个字符，依次调用token方法。 stream参数可以用来控制遍历的粒度，比如我调用方法 stream.eatWhile(/\s/), 那么当前cursor后面所有的空格会被匹配到stream中，stream.current()的值就是所有匹配到的空格。 **/ token: (stream) => { if (stream.eatSpace()) { return null }

 stream.eatWhile(/[\$\w\u4e00-\u9fa5]/)

 const cur = stream.current() const exist = myHighlightList.some((item) => { return item === cur })

 /** def 表示蓝色，CodeMirror为我们定义了许多颜色，其他还有： keyword {color: #708;}  atom {color: #219;} number {color: #164;} 等等，具体可以看codemirror.css文件中的定义 **/ if (exist) { return 'def' }

 stream.next() } }})

// 定义想要自动补全的wordsconst myHintList = [ 'hint1', 'hint2', 'ha2', 'ha3']CodeMirror.registerHelper("hint", "myMode", function (cm) { var cur = cm.getCursor(), token = cm.getTokenAt(cur); var start = token.start, end = cur.ch var str = token.string

 // 每次按下 Alt+/ 后会执行这个方法，这里将当前输入的字符和myHintList内的文本做前缀匹配过滤，实现一边输入一边查找的功能 const list = myHintList.filter((item) => { return item.indexOf(str) === 0 })

 if (list.length) return { list: list, from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end) };});

const editor = CodeMirror.fromTextArea(document.getElementById("editor"), { lineNumbers: true, // 是否显示行号 extraKeys: { "Alt-/": "autocomplete" }, // 定义自动补全的快捷键 matchBrackets: true, // 是否添加匹配括号高亮 mode: 'myMode' // 自定义的mode名称});

// 这里实现的功能就是按下左括号，自动添加右括号// 中括号，大括号同理editor.addKeyMap({ name: 'autoInsertParentheses', "'('": (cm) => { const cur = cm.getCursor()

 cm.replaceRange('()', cur, cur, '+insert') cm.doc.setCursor({ line: cur.line, ch: cur.ch + 1 }) }})