codemirror mysql_Angular6 CodeMirror在线编辑sql 智能提示
1. 安装ng2-codemirror包、codemirror包
npm install ng2-codemirror -- save
npm install codemirror -- save
2. 在所需要使用codemirror组件的模块中引入CodeMirror模块
import {CodemirrorModule} from 'ng2-codemirror';
@NgModule({
imports: [
CodemirrorModule
],
3. 在组件html模板文件中使用codemirror组件
// demo.component.html
[(ngModel)]="code"
[config]="cmOptions">
4. 在组件ts文件中定义codemirror组件所需要的变量; 和引入codemirror组件所需的js文件
// demo.component.ts
// 1. 引入js文件
import * as CodeMirror from 'codemirror';
import 'codemirror/mode/sql/sql.js';
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/sql-hint.js';
export class DemoComponent {
// 2. 定义CodeMirror组件所需要的变量
sqlData: any = ''; // 双向绑定,获取输入的sql语句
cmOptions: any = { // codemirror组件的配置项
lineNumbers: true, // 显示行号
styleActiveLine: true, // 当前行背景高亮
lineWrapping: true, // 自动换行
mode: { name: 'text/x-mysql' }, // 定义mode
theme: 'ambiance', // 设置黑色主题
extraKeys: {
'Ctrl': 'autocomplete', // 提示快捷键
Tab: function (cm) {
const spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
cm.replaceSelection(spaces);
}
}, // 自动提示配置
};
}
5. 还需要引入codemirror所需要的css文件
// angular.json
"styles": [
"node_modules/codemirror/lib/codemirror.css", // 基本样式
"node_modules/codemirror/addon/hint/show-hint.css", // 提示框样式
"node_modules/codemirror/theme/ambiance.css", // 对应配置主题的css文件
],
6. 重启项目(修改完angular.json文件后需要重启项目), 预览
codemirror mysql_Angular6 CodeMirror在线编辑sql 智能提示相关推荐
- SQL 智能提示工具
SQL 智能提示工具 已前写SQL语句的时候一直是手写的.最近看到同事写SQL时有提示,于是我就google一下,找了个SQL智能提示工具. 真是的满好的. SQL 2008默认就有了智能提示,可是我 ...
- SQL智能提示插件--SQLPrompt_7.2.0.241(破解 )
SQL智能提示插件可提高SQL srever 数据库编写效率. 链接:https://pan.baidu.com/s/1BpMumkes59pd3stLnsASIw 密码:zgea 如果使用一段时间, ...
- SQL Prompt——SQL智能提示插件
数据库是大家在项目开发中肯定会用到的,C#项目用的最多的就是微软自家的SQL Server了.不可否认,微软的Visual Studio开发平台很好用,很直观的体现就是智能提示.敲几个字符,相关的信息 ...
- Dynamics CRM2011 在Visual Studio中开启Javascript的Xrm.Page智能提示
前面一篇博文:http://blog.csdn.net/vic0228/article/details/49512699 讲到了在Visual Studio中开启xml编辑的智能提示,本篇接着来讲下如 ...
- python编辑代码的页面_使用CodeMirror实现Python3在线编辑器的示例代码
一.编写页面 主要是引入相关的css文件和js文件,这里采用简单插入link和script标签的形式. Document click 二.配置CodeMirror 在index.js中配置CodeMi ...
- SQL Server 2008编写脚本时智能提示功能丢失的处理
SQL Server 2008编写脚本时智能提示功能丢失的处理 1.查看工具选项中[启用IntelliSense]是否打开: 选择[工具]-->[选项]打开选项页面,依次展开[文本编辑器]--& ...
- 在线 Beosin EOS-IDE 免费版本同时支持智能合约在线编辑、编译、运行调试、部署
Beosin EOS-IDE 是一款免费的面向EOS区块链平台的智能合约在线集成开发环境,可同时支持合约开发.部署.测试和源码调试等功能的在线区块链应用开发集成环境. Beosin EOS-IDE产品 ...
- Beosin成都链安发布在线EOS-IDE免费版本 EOS智能合约在线编辑、编译、运行调试、部署一步到位...
Beosin EOS-IDE产品链接: https://beosin.com/EOS-IDE/index.html#/ (推荐Chrome浏览器) 每一个区块链开发的程序员都需要一个界面友好,操作方便 ...
- [转]解决Eclipse中编辑xml文件的智能提示问题
转自:http://hi.baidu.com/cghroom/item/48fd2d0dc1fc23c675cd3c3e 摘要: Eclipse for Android xml 文件代码自动提示功能 ...
最新文章
- 2020级HAUT新生周赛(四)@张承树专场
- 改善代码设计 —— 组织好你的数“.NET研究”据(Composing Data)
- atmega8a如何烧写程序_如何让树莓派4上固件的debug日志输出到串口?
- 工业交换机如何判断性能的好坏呢?
- instagram技术_Instagram9位科技女孩进行技术采访的主要技巧
- django 正则捕捉路径 re_path函数
- zuul转发服务一直报404_SpringCloud之Zuul的多个使用场景
- python键盘监听
- 基于LOAM框架的激光SLAM开源程序汇总
- Struts2中Struts.xml的作用
- C#的6种常用集合类大比拼
- Exadata 18.1新特性--计算节点升级增强
- C4D插件X-Particles粒子特效(一)
- Screw 整合Oracle 报错异常信息oracle.jdbc.driver.T4CConnection.isValid(I)Z
- Qt实现桌面右下角弹窗
- 【SparkSQL笔记】SparkSQL的入门实践教程(一)
- 易道云控数字引擎下的企业协同办公
- hex文件格式剖析,以及hex与bin文件互相转换
- 高级文本编辑器UltraEdit 18 Mac中文版
- 考研日语线上笔记(二):惯用句型250条
热门文章
- 达梦数据库报“网络通信异常”分析解决
- bottle 文件服务器,Python库glances和Bottle完成服务器交互式动态监控
- 安全防御——防火墙一
- poj 3259 时光穿梭问题 bellman_ford算法
- 偏标记学习(大杂烩,有点乱)
- 【矩阵论】Hermite二次型(3)
- 【已知一点经纬度和距离,计算另一点的经纬度】
- php xcopy,Linux_Xcopy 复制文件和目录,包括子目录。,Xcopy 复制文件和目录,包括子 - phpStudy...
- 人工智能知识全面讲解: 什么问题适合用机器学习方法解决?
- MySQL - 索引能够提升数据的检索速度