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

本文涉及的产品
云数据库 RDS SQL Server,独享型 2核4GB
云数据库 RDS MySQL Serverless,0.5-2RCU 50GB
简介: 引入静态资源: js 代码实例:/** * 用来实时对用户的输入...

引入静态资源:

    <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

相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
3月前
|
中间件
在 Egg.js 应用中,你可以通过 `this` 关键字来获取上下文
在 Egg.js 应用中,你可以通过 `this` 关键字来获取上下文
22 1
|
5月前
|
前端开发 JavaScript
前端基础 - JavaScript之this关键字
前端基础 - JavaScript之this关键字
21 0
|
5月前
|
Web App开发 JavaScript 前端开发
Chrome 开发者工具里根据关键字搜索,结果列表里的 JavaScript 文件名后面跟的 ‘eval‘ 是什么含义
Chrome 开发者工具里根据关键字搜索,结果列表里的 JavaScript 文件名后面跟的 ‘eval‘ 是什么含义
41 0
|
1天前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
5月前
|
前端开发 JavaScript
带你读《现代Javascript高级教程》三、函数上下文和this关键字(1)
带你读《现代Javascript高级教程》三、函数上下文和this关键字(1)
|
5月前
|
JavaScript 前端开发
带你读《现代Javascript高级教程》三、函数上下文和this关键字(2)
带你读《现代Javascript高级教程》三、函数上下文和this关键字(2)
|
1月前
|
资源调度 JavaScript 关系型数据库
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
25 0
|
2月前
|
JavaScript 关系型数据库 MySQL
百度搜索:蓝易云【Node.js写接口连接MySQL数据库教程】
现在,你的Node.js应用已经启动,可以通过访问 `http://localhost:3000/users`来获取所有用户的信息。注意替换上述代码中的数据库连接信息为你自己的实际数据。
30 0
|
2月前
|
资源调度 JavaScript 关系型数据库
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)(下)
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
13 0
|
2月前
|
JavaScript 前端开发
js中new关键字的作用,new一个对象的过程中发生了什么
js中new关键字的作用,new一个对象的过程中发生了什么

推荐镜像

更多