引入静态资源:
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)
保存
}
});
参考资料: