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
<codemirror
[(ngModel)]="code"
[config]="cmOptions">
</codemirror>
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文件后需要重启项目), 预览
Angular6 CodeMirror在线编辑sql 智能提示的更多相关文章
- SQL Prompt——SQL智能提示插件
数据库是大家在项目开发中肯定会用到的,C#项目用的最多的就是微软自家的SQL Server了.不可否认,微软的Visual Studio开发平台很好用,很直观的体现就是智能提示.敲几个字符,相关的信息 ...
- Dynamics CRM 在Visual Studio中开启XML编辑的智能提示
对于.net开发人员来说Visual Studio这一开发工具自然是再熟悉不过,它强大的功能给我们的编程带来了极大的方便,代码智能提示就属其中一项. 在Dynamic CRM的开发中在各种工具出来之前 ...
- 使用vim编辑python智能提示
一.vim python自动补全插件:pydiction 可以实现下面python代码的自动补全: 1.简单python关键词补全 2.python 函数补全带括号 3.python 模块补全 4.p ...
- SQL智能提示插件——SQLPrompt
1.安装SQLPrompt,直接点击下一步即可,然后打开SQL Server 在菜单栏找到SQLPrompt选项注册该软件 2.先断开网络,然后运行注册机,将注册吗复制到序列号的地方,将两个勾选的复选 ...
- sql 智能提示
依次打开SSMS—>工具—>选项—>文本编辑器—>Transact-SQL—>IntelliSense—>检查右侧窗体是否启用!!
- Dynamics CRM2011 在Visual Studio中开启Javascript的Xrm.Page智能提示
前面一篇博文:http://blog.csdn.net/vic0228/article/details/49512699 讲到了在Visual Studio中开启xml编辑的智能提示,本篇接着来讲下如 ...
- VS 2015 update2 装xamarin后,编辑axml文件无智能提示的解决方法。
1.从github网上下载xsd文件.地址:https://github.com/atsushieno/monodroid-schema-gen: 2.如果你是以ie或edge浏览器下载的,一定要又键 ...
- 解决Eclipse中编辑xml文件的智能提示问题,最简单的是第二种方法。
Eclipse for Android xml 文件代码自动提示功能,介绍Eclipse 编辑器中实现xml 文件代码自动智能提示功能,解决eclipse 代码提示失效.eclipse 不能自动提示. ...
- [转]解决Eclipse中编辑xml文件的智能提示问题
转自:http://hi.baidu.com/cghroom/item/48fd2d0dc1fc23c675cd3c3e 摘要: Eclipse for Android xml 文件代码自动提示功能 ...
随机推荐
- 模式匹配和正则表达式_python
模式匹配和正则表达式的学习 python实现 正则表达式 其对文字处理有着超高的效率 利用正则表达式可以实现"三步解决一个问题" 步骤 1.用 import re 导入正则表达式模 ...
- codeforces 626 G. Raffles(线段树+思维+贪心)
题目链接:http://codeforces.com/contest/626/problem/G 题解:这题很明显买彩票肯定要买贡献最大的也就是说买p[i]*(num[i]+1)/(num[i]+a[ ...
- java课堂测试样卷-----简易学籍管理系统
程序设计思路:分别建立两个类:ScoreInformation类(用来定义学生的基本信息以及设置set和get函数)ScoreManagement类(用来定义实现学生考试成绩录入,考试成绩修改,绩点计 ...
- QRowTable表格控件(四)-效率优化之-优化数据源
目录 一.开心一刻 二.问题分析 三.重写数据源 1.自己存储数据 2.重写data接口 四.比较 五.相关文章 原文链接:QRowTable表格控件(四)-效率优化之-优化数据源 一.开心一刻 一程 ...
- 分布式之分布式事务、分布式锁、接口幂等性、分布式session
一.分布式session session 是啥?浏览器有个 cookie,在一段时间内这个 cookie 都存在,然后每次发请求过来都带上一个特殊的 jsessionid cookie,就根据这个东西 ...
- Java虚拟机原理和调优
https://blog.csdn.net/sun1021873926/article/details/78002118 115道Java经典面试题(面中率最高.最全) 史上最全 40 道 Dubbo ...
- C#委托(delegate、Action、Func、predicate)和事件
一.前言 刚开始工作的时候,觉得委托和事件有些神秘,而当你理解他们之后,也觉得好像没有想象中的那么难.在项目中运用委托和事件,你会发现他非常棒,这篇博文算是自己对委托和事件的一次梳理和总结. 二.委托 ...
- Python(Head First)学习笔记:六
6 定制数据对象:数据结构自定义 打包代码与数据 james2.txt: James Lee,2002-3-14,2-34,3:21,2.34,2.45,3.01,2:01,2:01,3:10,2-2 ...
- MySQL二进制日志分析-概述篇
MySQL从3.23版本开始引入了二进制日志,用于的数据复制, 二进制日志根据MySQL的版本不同,目前有4个版本: https://dev.mysql.com/doc/internals/en/bi ...
- .Net基础篇_学习笔记_第八天_复杂数据类型(常量/枚举/结构)
1.常量: 声明的常量的语法:const 变量类型 变量名=值;最大的特点就是,声明了常量后,就不能再被重新赋值. 2.枚举 语法:[public] enum 枚举名{ 值1, 值2, 值3, ... ...