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

引入静态资源:

    <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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件工程师成长笔记

[干货]springboot集成rocketmq

1.6K2
来自专栏技术博客

MVC项目开发中那些用到的知识点(Jquery ajax提交Json后台处理)

  jQuery提供的ajax方法能很方便的实现客户端与服务器的异步交互,在asp.net mvc 框架使用jQuery能很方便地异步获取提交数据,给用户提供更...

1362
来自专栏开发 & 算法杂谈

Hiredis源码阅读(一)

Hiredis库主要包含三类API:同步api、异步api以及回复解析api。首先介绍一下同步api以及回复解析api。

49411
来自专栏Java进阶架构师

03:SpringBoot整合SpringDataJPA实现数据库的访问(二)

首先回忆一下,前面我们创建studentRepo类继承JpaRepository<T,ID>接口,即可实现最基本的crud。如下:

872
来自专栏张善友的专栏

编写前置和后置条件的连贯接口库:CuttingEdge.Conditions

当调用一个方法时,在其执行之前期望其处于特定状态; 也需要完成一些工作之后验证结果的状态。 这些假设被称为前置条件(pre-conditions )和 后置条件...

2097
来自专栏王磊的博客

linq to entity常用操作

一、聚合函数查询 double sum = 0; using (xxxEntities db = new xxxEntities()) { sum = ...

3666
来自专栏跟着阿笨一起玩NET

关于DataGridView_DataError事件的问题

本文转载:http://blog.csdn.net/szstephenzhou/article/details/7834725

3681
来自专栏jiajia_deng

利用 NvAPI 设置数字振动数值

开始是一位朋友有这个需求,他给了我一个英伟达官网的开发包,名字是:R410-developer.zip(诸位可以自己到英伟达官网下载),里面提供了一些示例,包含...

1843
来自专栏前端说吧

JS-cookie封装

3705
来自专栏向治洪

android 的android httpClient详解

AndroidHttpClient结构: public final class AndroidHttpClient extends Object imple...

2075

扫码关注云+社区

领取腾讯云代金券