Angular6 CodeMirror在线编辑sql 智能提示
发布时间:2020-12-17 07:03:08 所属栏目:安全 来源:网络整理
导读:1. 安装ng2-codemirror包、codemirror包 npm install ng2-codemirror -- savenpm install codemirror -- save 2. 在所需要使用codemirror组件的模块中引入CodeMirror模块 import {CodemirrorModule} from ‘ng2-codemirror‘;@NgModule({ imports: [ Codemir
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文件后需要重启项目),预览(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |