CodeMirror 实现 JavaScript、 MySql 关键字的变色和自动实时提示 autocomplete

引入静态资源：

 <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"> <#--https://codemirror.net/theme/--> <link rel="stylesheet" href="https://codemirror.net/theme/base16-light.css"> <script src="https://codemirror.net/lib/codemirror.js"></script> <script src="https://codemirror.net/mode/javascript/javascript.js"></script> <script src="https://codemirror.net/addon/hint/show-hint.js"></script> <script src="https://codemirror.net/addon/hint/javascript-hint.js"></script> <link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css"> <script src="https://codemirror.net/addon/selection/active-line.js"></script> <script src="https://codemirror.net/addon/edit/matchbrackets.js"></script> <link rel="stylesheet" href="https://codemirror.net/addon/fold/foldgutter.css"/> <script src="https://codemirror.net/addon/fold/foldcode.js"></script> <script src="https://codemirror.net/addon/fold/brace-fold.js"></script> <script src="https://codemirror.net/addon/fold/brace-fold.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script> <script src="https://codemirror.net/addon/lint/lint.js"></script> <script src="https://codemirror.net/addon/lint/javascript-lint.js"></script> <link rel="stylesheet" href="https://codemirror.net/addon/lint/lint.css"> 

js 代码实例：

 /** * 用来实时对用户的输入进行提示 */ function showCodeHint(editor) { editor.on("cursorActivity", function () { //获取用户当前的编辑器中的编写的代码 var words = editor.getValue() + ""; //利用正则取出用户输入的所有的英文的字母 words = words.replace(/[a-z]+[\-|\']+[a-z]+/ig, '').match(/([a-z]+)/ig); //将获取到的用户的单词传入CodeMirror,并在javascript-hint中做匹配 CodeMirror.ukeys = words; //调用显示提示 editor.showHint(); }); } $(function () { appendNode(); // 初始化首节点 renderFirstCodeArea(); $('#add-node-btn').unbind().bind('click', () => { appendNode(); renderLastCodeArea(); }); function appendNode() { let firstNodeHtml = getNodeHtml(); $('#node-list').append(firstNodeHtml); } function renderFirstCodeArea() { let inputArray = $('[name="input"]'); let inputEditor = CodeMirror.fromTextArea(inputArray[0], CodeMirrorOptions); showCodeHint(inputEditor); let inputBody = inputEditor.doc.getValue(); let outputArray = $('[name="output"]'); let outputEditor = CodeMirror.fromTextArea(outputArray[0], CodeMirrorOptions); showCodeHint(outputEditor); let outputBody = outputEditor.doc.getValue(); } function renderLastCodeArea() { let inputArray = $('[name="input"]'); let inputArrayLength = inputArray.length; let inputEditor = CodeMirror.fromTextArea(inputArray[inputArrayLength - 1], CodeMirrorOptions); showCodeHint(inputEditor); let inputBody = inputEditor.doc.getValue(); let outputArray = $('[name="output"]'); let outputArrayLength = outputArray.length; let editor = CodeMirror.fromTextArea(outputArray[outputArrayLength - 1], CodeMirrorOptions); showCodeHint(editor); let outputBody = editor.doc.getValue(); } function getNodeHtml() { return `<div class="node"> <form class="form"> <div class="form-group row"> <label class="col-sm-2 col-form-label">节点名称</label> <div class="col-sm-10"> <input name="name" type="text" class="form-control" placeholder="节点名称"> </div> </div> <div class="form-group row"> <label class="col-sm-2">输入脚本</label> <div class="col-sm-10"> <textarea name="input" rows="10" class="form-control"></textarea> </div> </div> <div class="form-group row"> <label class="col-sm-2">期望输出脚本</label> <div class="col-sm-10"> <textarea name="output" class="form-control"></textarea> </div> </div> <div class="form-group row"> <label class="col-sm-2">期望输出值</label> <div class="col-sm-10"> <input name="actualOutput" class="form-control"> </div> </div> <div class="form-group row"> <label class="col-sm-2">断言算子</label> <div class="col-sm-10"> <select name="operator" class="form-control"> <option value="equals" selected>EQ(equals)</option> <option value="contains">CNT(contains)</option> <option value="startWith">STW(startWith)</option> <option value="endWith">EDW(endWith)</option> </select> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label"></label> <div class="col-sm-10"> <button class="btn-sm btn-outline-primary">保存</button> </div> </div> </form> </div>`; } }); 

参考资料：

https://codemirror.net/doc/manual.html#config

CodeMirror实现MySql关键字的变色和自动提示：
https://blog.csdn.net/qq1142003960/article/details/45651097

Javascript codemirror 高级应用：
https://blog.csdn.net/kingrome2017/article/details/81626084