codemirror mysql_CodeMirror 实现 JavaScript、 MySql 关键字的变色和自动实时提示 autocomplete...
引入静态资源:
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)
保存
`;
}
});
参考资料:
codemirror mysql_CodeMirror 实现 JavaScript、 MySql 关键字的变色和自动实时提示 autocomplete...相关推荐
- php 上万关键字匹配,JavaScript 上万关键字瞬间匹配实现代码
JavaScript 上万关键字瞬间匹配实现代码 更新时间:2013年07月07日 23:36:21 作者: 发一篇之前写的文章,平时还是经常用到的,尤其是河蟹词特别多的聊天系统里 提到关键字搜索 ...
- mysql中distinct关键字,MySQL关键字Distinct的详细介绍
DDL Prepare SQL: ? Prepare Data: ? 查询数据如下图所示: 第一种情况,使用Distinct关键字,查询单列数据,如下图所示: 结果:对 name 字段进行去重处理,符 ...
- Javascript this关键字 指向详解
Javascript this关键字 指向详解 面向对象语言中 this 表示当前对象的一个引用.在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变. 1) 单独使用 ...
- Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle...
Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq index2 3. ...
- mysql关键字test_MySQL关键字Distinct的详细介绍
MySQL关键字Distinct的详细介绍 MySQL是一个关系型数据库管理系统,以下是小编跟大家介绍MySQL关键字Distinct的详细介绍,欢迎大家阅读! MySQL关键字Distinct用法介 ...
- JavaScript保留关键字及危险变量名
JavaScript保留关键字及危险变量名 定义变量名需谨慎 在开发过程当中,如果没有必要就尽可能少的使用以下列出的单词作为变量名称或者属性名称,关键字是严格不允许,而浏览器定义的变量名或者类名在使用 ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 构建界面 界面HTML代码 <style>#data,th,td{border: 1px solid #aaaaaa;/*合并边框线*/border ...
- 基于javaweb的私人牙科诊所病历管理系统(java+jsp+css+javascript+mysql)
基于javaweb的私人牙科诊所病历管理系统(java+jsp+css+javascript+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/id ...
- Mysql关键字之Union all说明
Mysql关键字之Union All Union All关键字说明 Union All关键字说明 mysql中union all 关键字是连接两个人表的内容组成一张新表,要求两表字段个数一直即可. 举 ...
最新文章
- js中图片显示用ajax,javascript - 前台用ajax上传图片,怎么让图片上传完成显示的缩略图片的时候显示分辨率大小...
- 转载:CSS hack技巧大全
- 11.IDA-this指针
- Vue_异步加载_vue-resource(不再维护)
- 苹果cms V10模板 秘趣响应式高端在线影视视频模板
- pyTorch api
- 关于子元素连续数字和英文内容溢出父元素的问题
- 中兴8912交换机show run故障处理
- 回归任务中的评价指标MAE,MSE,RMSE,R-Squared
- python 两个列表比较_如何在Python中比较两个列表
- 计算机综合布线毕业论文设计方案,网络综合布线毕业论文设计.doc
- 抽样分布(卡方分布、t分布、F分布)
- python模拟登录中国海洋大学教务系统(青果)- 爬取学期所有专业课至excel - 并进行课表排课(一)
- 资深架构师推荐 21 本技术好书
- Win7 定时关机,重启命令
- Android电池信息
- 中国医学影像工作站市场趋势报告、技术动态创新及市场预测
- U盘变成RAW格式,数据如何恢复?
- Xshell配色方案
- 作为计算机专业学生,说一说校招