开发者社区> 程序员诗人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 引入静态资源: 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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器ECS如何安装PHP+MYSQL环境?
阿里云服务器ECS如何安装PHP+MYSQL环境?
6576 0
docker安装mysql
docker安装mysql5.7详解,容器打包迁移等。
1722 0
使用ROS创建ECS,安装MySQL并生成用户
在杭州创建自建数据库网络和服务器环境,部署一台ECS,安装MySQL并创建root用户,三个普通用户并分配权限,创建数据库插入测试数据。ros模板 { "ROSTemplateFormatVersion": "2015-09-01", "Description": "部署自建数据库网络和服.
1105 0
阿里云linux服务器安装mysql并实现远程访问
阿里云linux服务器安装mysql数据库,并实现远程访问。
9299 0
从零开始搭建Java开发环境第二篇:如何在windows10里安装MySQL
1 下载安装包 1.1 压缩包 https://dev.mysql.com/downloads/mysql/ [外链图片转存失败(img-oesO8K09-1566652568838)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "点击并拖拽以移动")] 1.
772 0
Ubuntu 安装Mysql首次登录密码
sudo cat /etc/mysql/debian.cnf
977 0
在CentOS上安装搭建PHP+Apache+Mysql的服务器环境方法
本篇给大家分享一下在CentOS上安装搭建PHP+Apache+Mysql的服务器环境方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器。
1311 0
Docker 安装MySQL 主从复制 、Redis 、nginx 、安装maven,和java 配置开发环境
使用docker 安装 MySQL 主从复制 、Redis 、nginx 、安装maven,和java 配置开发环境
1756 0
mysql从安装到建库,utf8mb4最佳实践,jdbc连接串全解析
mysql从安装到建库,utf8mb4最佳实践,jdbc连接串全解析
2920 0
+关注
程序员诗人
一个会写诗的程序员
828
文章
14
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载