引入靜態(tài)資源：

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;

//調(diào)用顯示提示

editor.showHint();

});

}

$(function () {

appendNode(); // 初始化首節(jié)點

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 `

節(jié)點名稱

輸入腳本

期望輸出腳本

期望輸出值

斷言算子

EQ(equals)

CNT(contains)

STW(startWith)

EDW(endWith)

保存

`;

}

});

參考資料：

總結(jié)

以上是生活随笔為你收集整理的codemirror mysql_CodeMirror 实现 JavaScript、 MySql 关键字的变色和自动实时提示 autocomplete...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。