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 智能提示的更多相关文章

  1. SQL Prompt——SQL智能提示插件

    数据库是大家在项目开发中肯定会用到的,C#项目用的最多的就是微软自家的SQL Server了.不可否认,微软的Visual Studio开发平台很好用,很直观的体现就是智能提示.敲几个字符,相关的信息 ...

  2. Dynamics CRM 在Visual Studio中开启XML编辑的智能提示

    对于.net开发人员来说Visual Studio这一开发工具自然是再熟悉不过,它强大的功能给我们的编程带来了极大的方便,代码智能提示就属其中一项. 在Dynamic CRM的开发中在各种工具出来之前 ...

  3. 使用vim编辑python智能提示

    一.vim python自动补全插件:pydiction 可以实现下面python代码的自动补全: 1.简单python关键词补全 2.python 函数补全带括号 3.python 模块补全 4.p ...

  4. SQL智能提示插件——SQLPrompt

    1.安装SQLPrompt,直接点击下一步即可,然后打开SQL Server 在菜单栏找到SQLPrompt选项注册该软件 2.先断开网络,然后运行注册机,将注册吗复制到序列号的地方,将两个勾选的复选 ...

  5. sql 智能提示

    依次打开SSMS—>工具—>选项—>文本编辑器—>Transact-SQL—>IntelliSense—>检查右侧窗体是否启用!!

  6. Dynamics CRM2011 在Visual Studio中开启Javascript的Xrm.Page智能提示

    前面一篇博文:http://blog.csdn.net/vic0228/article/details/49512699 讲到了在Visual Studio中开启xml编辑的智能提示,本篇接着来讲下如 ...

  7. VS 2015 update2 装xamarin后,编辑axml文件无智能提示的解决方法。

    1.从github网上下载xsd文件.地址:https://github.com/atsushieno/monodroid-schema-gen: 2.如果你是以ie或edge浏览器下载的,一定要又键 ...

  8. 解决Eclipse中编辑xml文件的智能提示问题,最简单的是第二种方法。

    Eclipse for Android xml 文件代码自动提示功能,介绍Eclipse 编辑器中实现xml 文件代码自动智能提示功能,解决eclipse 代码提示失效.eclipse 不能自动提示. ...

  9. [转]解决Eclipse中编辑xml文件的智能提示问题

    转自:http://hi.baidu.com/cghroom/item/48fd2d0dc1fc23c675cd3c3e 摘要:  Eclipse for Android xml 文件代码自动提示功能 ...

随机推荐

  1. F#周报2019年第35期

    新闻 新增强的NuGet搜索 Windows Terminal预览版v0.4发布 在Visual Studio的YouTube频道上获取更多的新内容 .NET团队是如何使用Azure Pipeline ...

  2. 分清<url-pattern>/</url-pattern>与<url-pattern>/*</url-pattern>的不同

    在写springMVC配置web.xml的时候会碰到下面有时候写/,有的时候又写/: 那么这两者有什么区别呢?我现在进行一些讲解: 1.当配置<url-pattern>/</url- ...

  3. 牛客网暑期ACM多校训练营(第二场) 题解 A run 递推 dp

    链接:https://www.nowcoder.com/acm/contest/140/A来源:牛客网 White Cloud is exercising in the playground. Whi ...

  4. Java服务器-Disruptor使用注意

    最近看了一下部署游戏后台的服务器状况,发现我的一个Java程序其占用的CPU时长超过100%,排查后发现竟是Disruptor引起的,让我们来看看究竟为什么Disruptor会有这样的表现. 发现占用 ...

  5. Spring Cloud Alibaba | Sentinel:分布式系统的流量防卫兵进阶实战

    Spring Cloud Alibaba | Sentinel:分布式系统的流量防卫兵进阶实战 在阅读本文前,建议先阅读<Spring Cloud Alibaba | Sentinel:分布式系 ...

  6. Go pprof性能调优

    在计算机性能调试领域里,profiling 是指对应用程序的画像,画像就是应用程序使用 CPU 和内存的情况. Go语言是一个对性能特别看重的语言,因此语言中自带了 profiling 的库,这篇文章 ...

  7. SQL查询出距当前时间最近的一条或多条记录。

    select * from bas_dredge,(SELECT C_ENTERPRISEID,MAX(D_UTIME) D_LTIME FROM BAS_DREDGE GROUP BY C_ENTE ...

  8. Android开发必看知识

    奇艺高清UI界面源代码 http://www.eoeandroid.com/thread-160824-1-1.html 搜索关键字飞入飞出效果 http://www.eoeandroid.com/t ...

  9. 阿里云 centos7 64位搭建JAVA环境-----安装JDK(2)

    mysql安装好以后,把jdk环境配置一下. 首先下载jdk 8,在官网下载. 找到链接 http://download.oracle.com/otn-pub/java/jdk/8u171-b11/5 ...

  10. MySQL优化之索引原理(二)

    一,前言 ​ 上一篇内容说到了MySQL存储引擎的相关内容,及数据类型的选择优化.下面再来说说索引的内容,包括对B-Tree和B+Tree两者的区别. 1.1,什么是索引 ​ 索引是存储引擎用于快速找 ...