因为项目中需要一个能够实现自定义规则的文本编辑器，对比了几个库，最终还是选用了CodeMirror
CodeMirror的优点
文档完善，简单易懂Demo丰富可扩展性强今天我们就来实现一些自定义的语言规则，这些规则只是让大家对CodeMirror的使用方法有一个初步的了解，并不一定实用：
自定义关键字高亮输入左括号自动出现右括号左右括号颜色高亮自定义代码补全下拉提示框开工，第一步，我们可以去github上把CodeMirror的代码拉下来，或者用npm安装也可以，然后使用到了里面的几个关键文件
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>两个核心文件是必不可少的，其他的各种addons则是选配
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 }) }})转载于:https://www.cnblogs.com/guochongbin/p/10642969.html
相关资源：JAVA上百实例源码以及开源项目源代码