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

引入静态资源：

    
<#--https://codemirror.net/theme/-->
    

    
    
    
    
    

    
    

    
    
    
    
    
    
    
    

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)
                        
                    
                

                

                    
                    

                        保存
                    
                
            
        
`;
    }


});

参考资料：

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