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

引入静态资源：

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 `

节点名称

输入脚本

期望输出脚本

期望输出值

断言算子

EQ(equals)

CNT(contains)

STW(startWith)

EDW(endWith)

保存

`;

}

});

参考资料：