codemirror实现SQL代码自动提示功能

最新推荐文章于 2024-08-08 07:35:28 发布
最新推荐文章于 2024-08-08 07:35:28 发布
阅读量1w 收藏 3
点赞数 3
分类专栏： javascript codemirror 文章标签： codemirror
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Melody_Susan/article/details/93020189
版权
本文介绍如何利用Codemirror实现SQL代码的自动提示功能，包括引入必要的CSS和JS文件，以及配置初始化 Codemirror 和设置数据源。
摘要由CSDN通过智能技术生成

使用codemirror使用SQL代码能够自动提示如 PLSQL等工具一般智能提示功能，

1、引入show-hint.css，codemirror.css和主题样式如：

        <link href="codemirror-5.47.0/lib/codemirror.css"/>
	<link href="codemirror-5.47.0/theme/monokai.css"/>
	<link href="codemirror-5.47.0/theme/eclipse.css"/>
	<link href="codemirror-5.47.0/theme/idea.css"/>
	<link href="codemirror-5.47.0/addon/hint/show-hint.css"/>
	<link href="codemirror-5.47.0/addon/display/fullscreen.css"/>

2、引入codemirror.js、sql.js、show-hint.js、sql-hint.js

如：

	codemirror-5.47.0/lib/codemirror.js
	codemirror-5.47.0/mode/sql/sql.js
	codemirror-5.47.0/mode/clike/clike.js
	codemirror-5.47.0/addon/display/autorefresh.js
	codemirror-5.47.0/addon/edit/matchbrackets.js
	codemirror-5.47.0/addon/selection/active-line.js
最低0.47元/天 解锁文章
Inovation_Sky
关注
专栏目录
React CodeMirror 中文数据库表字段SQL自动补全源提示
Superlaoying1的博客
07-17 281
【代码】React CodeMirror 中文数据库表字段SQL自动补全源提示。
codemirror自定义sql提示
czz19910404的博客
03-14 2755
codemirror自定义sql提示
CodeMirror 5 教程
最新发布
gitblog_00063的博客
08-08 851
CodeMirror 5 教程 codemirror5In-browser code editor (version 5, legacy)项目地址:https://gitcode.com/gh_mirrors/co/codemirror5 1. 项目介绍 CodeMirror 5 是一个用JavaScript实现的在浏览器内运行的代码编辑器。这个版本是遗留版，主要用于支持旧项目，而版本6是目前...
vue+el-dialog中使用codemirror遇到的问题，没有代码提示了
05-12 1352
所以安装了jshint npm i jshint --save;在main.js 中引入import jshint from “jshint”;解决方法：由于代码提示框样式的z-index为10 小于el-dailog的z-index；所以可以给代码提示框设置样式 ，注意如果用的scss样式，记得不要添加scope属性，不然可能不生效，或者使用vue的样式侵入。：想在原有的js代码提示的基础上，新增一些自定义的代码提示。
CodeMirror实现自定义提示功能
smk108的博客
02-18 2万+
我之前在文章《CodeMirror基本使用及实现关键词高亮、自定义主题》中简单介绍了CodeMirror实现自动提示的功能，但是使用的是CodeMirror中封装好的几种指定语法的提示功能，如css、html、js、sql、xml，对应文件如下列表： 现在我开发中有需求做自定义语法的自动提示功能，并没有现成的mode可以使用，学习CodeMirror API和上述几个文件的实现方式之后找到了...
codemirror的基础使用自定义代码提示
SmallGirlYang的博客
10-09 1万+
codemirror的基础使用方法引用和初始化使用codemirrorcodemirror不同功能需要引用的文件CodeMirror自定义代码提示 引用和初始化 引用的两种方式 npm引用： npm install vue-codemirror 组件中引用： import {codemirror} from ‘vue-codemirror’; 此种方式在此不详细介绍，可参考：CodeMirror入门教程 npm引用： npm install vue-codemirror 组件中引用： import {co
codemirror支持中文数据库模式表字段SQL自动代码提示
03-25
codemirror的sql代码提示默认是不支持中文表名自动提示的，在源码中写法只是检索字母数字下划线，加上中文匹配的正则后，终于支持中文表了。修改文件只有sql.js，其他文件只是为了方便打断点，格式化了一下方法
CodeMirror SQL智能提示功能的使用、源码解析与改写，使之支持Oracle的使用习惯
一个程序猿的自我修养
01-28 3847
最近公司项目，需要用到Codemirror编辑器来实现一个网页版的OracleSQL编辑器。但Codemirror的提示功能只支持到 表.列 这种级别的提示，不支持Oracle常用的 用户.表.列 的提示，所以进行改写。 先简单介绍一下Codemirror的使用方式： &lt;link rel="stylesheet" href="codemirror-5.39.2/lib/codemirr...
codeMirror支持sql输入提示
五月西瓜的专栏
08-15 5832
codeNirror 是一款非常不错的在线代码编辑插件。现在简单介绍对sql编辑的支持。 初始化 (function (){ window.top._editor = CodeMirror.fromTextArea($("#codeTypeArea")[0], { mode: 'text/x-sql', inde
codemirror 使用 sql 模式时，部分关键字无法智能提示的问题
博客
12-28 2273
解决 codemirror 的 sql 模式关键字提示不完整问题
在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）
热门推荐
跌跌撞撞的博客
11-15 3万+
在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示） 1、使用npm安装依赖 npm install --save codemirror; 2、在页面中放入如下代码 &lt;template&gt; &lt;textarea ref="mycode" class="codesql" v-model="code" style="height:200px;wid...
基于CodeMirror的一个在线sql编辑工具
04-17
* 左侧提供数据库表字段树形结构，可拖拽到sql编辑框。 * 输入首字母可提示表名字段名（表名字段名可自定义） 。 *括号高亮匹配。 * 执行与中断功能。 * 自定义外部接口获取sql关键词、函数、表字段等，用于sql编辑时提示补全,键盘录入后自动提示，上下键选择，tab键或点击选中项自动补全。 * sql格式化。
vue实现codemirror代码编辑器中的SQL代码格式化功能
10-16
主要介绍了vue实现codemirror代码编辑器中的SQL代码格式化功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
在vue项目中使用codemirror插件实现代码编辑器功能
10-16
// 实现代码自动提示功能，使用cursorActivity事件 editor.on('cursorActivity', function () { editor.showHint(); }); } }; ``` 在样式表`<style>`部分，我们可以自定义代码区域的字体大小和类型，以提高...
Codemirror提示关键词/自动提示
liujiawei00的博客
01-16 1万+
Codemirror是一个不错的Web代码编辑库，可以方便简单的集成。没有自动提示功能的代码编辑器是没有灵魂的，Codemirror的自动提示功能是使用show-hint库进行的，我们可以调用showHint方法或者autoComplete方法来显示提示框。 普遍的用法： var editor = CodeMirror.fromTextArea(document.getElementById("c...
codeMirror自动补全(sql)元数据结构提示 动态提示库下面的表名 表下的字段名
weixin_45496202的博客
06-23 9547
Vue中codeMirror自动补全(元数据库>表>字段联想提示) 参考文档(codeMirror使用说明说) codeMirror官网 需求: 在输入sql时,可以根据元数据自动提示某个库下面所有的表和字段(例如: hive.table.field)当我输入hive. 会自动提示后面所有的table选项.往后同理.具体效果如下图 实现方法: 第一步,引入codeMirror 必须文件和自动提示插件 // 引入全局实例 import _CodeMirror from 'codemirror';
vue3 codemirror关于 sql 和 json格式化的使用以及深入了解codemirror 使用json格式化提示错误的关键代码。包含了json格式化没有效果和json格式化提示错误
weixin_44784401的博客
01-27 5078
vue3 codemirror关于 sql 和 json格式化的使用以及深入了解codemirror 使用json格式化提示错误的关键代码。包含了json格式化没有效果和json格式化提示错误
codemirror+react-codemirror2实现代码提示
06-21
`CodeMirror` 和 `react-codemirror2` 是两个用于创建交互式代码编辑器的库，结合使用它们可以在 React 应用中实现强大的代码提示功能。以下是使用这两个库实现代码提示的一般步骤： 1. 安装依赖： - 首先，你需要安装 `codemirror` 和 `react-codemirror2`，可以通过 npm 或 yarn 进行安装： ``` npm install codemirror react-codemirror2 ``` 2. 引入组件： 在你的 React 组件中，引入 `CodeMirror` 和 `Editor` 组件： ```jsx import { Editor } from 'react-codemirror2'; import 'codemirror/mode/javascript/javascript'; import 'codemirror/addon/lint/lint'; import 'codemirror/addon/lint/javascript-lint'; ``` 3. 设置配置选项： 创建一个 CodeMirror 的配置对象，其中包含 `lint` 和 `autocompletion` 配置： ```jsx const CodeEditor = ({ value, onChange }) => { const options = { lineNumbers: true, mode: 'javascript', theme: 'abcdef', // 选择你喜欢的主题 lintWith: 'eslint', // 使用 ESLint 作为 lint 工具 completion: { hint: CodeMirror.hint.bracketedCompletion, // 自动补全功能 }, }; return ( <Editor value={value} options={options} onChange={onChange} spellCheck={true} // 如果需要启用拼写检查 /> ); }; ``` 4. 实现自动提示： - `completion` 配置中的 `hint` 属性指定了 CodeMirror 使用哪种类型的提示。`bracketedCompletion` 是一种常用的提示类型，它会在输入后显示可能的代码片段。 5. 使用和初始化： 在你的组件中初始化 `CodeEditor` 组件，并提供初始代码值和 onChange 回调，用于处理用户输入改变后的操作： ```jsx const [code, setCode] = useState(''); // 初始化代码 const handleCodeChange = (newCode) => { setCode(newCode); // 如果需要，你可以在这里处理自动补全结果或发送到服务器进行实时建议 }; return ( <CodeEditor value={code} onChange={handleCodeChange} /> ); ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值