CodeMirror实现MySql关键字的变色和自动提示

最新推荐文章于 2024-08-09 10:11:03 发布
最新推荐文章于 2024-08-09 10:11:03 发布
阅读量1.2w 收藏 5
点赞数
分类专栏： CodeMirror 文章标签： CodeMirror 加亮 自动补全 MySql 文本编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ1142003960/article/details/45651097
版权

最近开发需要，接触到了CodeMirror，觉得的确是个不错的东东。

这里把最常用的两个功能分享给大家。一个是关键字变色一个是自动提示。


先看下最终的效果图。外观还是不错的。可以自己选择主题(codemirror-5.2/theme/ambiance.css)


点击这里下载CodeMirror-5.2


核心代码

<script type="text/javascript" src="js/jquery-1.6.4.source.js"></script>
<link rel="stylesheet" href="js/codemirror-5.2/theme/ambiance.css">
<link type="text/css" rel="stylesheet" href="js/codemirror-5.2/lib/codemirror.css" />
<link type="text/css" rel="stylesheet" href="js/codemirror-5.2/addon/hint/show-hint.css" />
<script type="text/javascript" src="js/codemirror-5.2/lib/codemirror.js"></script>
<script type="text/javascript" src="js/codemirror-5.2/mode/sql/sql.js"></script>
<script type="text/javascript" src="js/codemirror-5.2/addon/hint/show-hint.js"></script>
<script type="text/javascript" src="js/codemirror-5.2/addon/hint/sql-hint.js"></script>
	
<style>.CodeMirror {border: 1px solid black;}</style>
	
	
<body>
<h2>SQL编辑器</h2>
<form><textarea id="code" name="code"></textarea></form>
    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        extraKeys: {"Ctrl": "autocomplete"},//输入s然后ctrl就可以弹出选择项
        mode: {name: "text/x-mysql"},
        theme: "ambiance"//主题
      });
    </script>
</body>
</html>


Timor好心情
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
codemirror实现SQL代码自动提示功能
06-20 1万+
使用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/monoka...
codemirror mysql_Angular6 CodeMirror在线编辑sql 智能提示
weixin_36207483的博客
02-06 483
1. 安装ng2-codemirror包、codemirror包npm install ng2-codemirror -- savenpm install codemirror -- save2. 在所需要使用codemirror组件的模块中引入CodeMirror模块import {CodemirrorModule} from 'ng2-codemirror';@NgModule({import...
codemirror自定义sql提示
czz19910404的博客
03-14 2716
codemirror自定义sql提示
CodeMirror编辑器自定义搜索框
最新发布
weixin_46006713的博客
08-09 238
这是在下载插件的revised-search.js基础上改的，这样我们引入的时候就不用使用插件的js文件了，而是我们自定义的js文件（第四条），想知道修改了哪里可以跟原文件进行比对。然后新建一个codemirror-revisedsearch.js文件，因为这个搜索插件本身的样式并不符合预期，当然想要插件的就不用单独新建js文件了。我这里直接写css不生效，使用了::v-deep。首先安装自定义搜索插件。
CodeMirror SQL智能提示功能的使用、源码解析与改写，使之支持Oracle的使用习惯
一个程序猿的自我修养
01-28 3828
最近公司项目，需要用到Codemirror编辑器来实现一个网页版的OracleSQL编辑器。但Codemirror的提示功能只支持到 表.列 这种级别的提示，不支持Oracle常用的 用户.表.列 的提示，所以进行改写。 先简单介绍一下Codemirror的使用方式： &lt;link rel="stylesheet" href="codemirror-5.39.2/lib/codemirr...
CodeMirror 实现 JavaScript、 MySql 关键字的变色和自动实时提示 autocomplete
程序员光剑
09-07 1万+
引入静态资源： &lt;link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"&gt; &lt;#--https://codemirror.net/theme/--&gt; &lt;link rel="stylesheet" href="https://c.
codeMirror自动补全(sql)元数据结构提示 动态提示库下面的表名 表下的字段名
weixin_45496202的博客
06-23 9502
Vue中codeMirror自动补全(元数据库>表>字段联想提示) 参考文档(codeMirror使用说明说) codeMirror官网 需求: 在输入sql时,可以根据元数据自动提示某个库下面所有的表和字段(例如: hive.table.field)当我输入hive. 会自动提示后面所有的table选项.往后同理.具体效果如下图 实现方法: 第一步,引入codeMirror 必须文件和自动提示插件 // 引入全局实例 import _CodeMirror from 'codemirror';
codemirror mysql_CodeMirror 实现 JavaScript、 MySql 关键字的变色和自动实时提示 autocomplete-阿里云开发者社区...
weixin_31486289的博客
01-27 233
引入静态资源：js 代码实例：/*** 用来实时对用户的输入进行提示*/function showCodeHint(editor) {editor.on("cursorActivity", function () {//获取用户当前的编辑器中的编写的代码var words = editor.getValue() + "";//利用正则取出用户输入的所有的英文的字母words = words.rep...
codemirror支持中文数据库模式表字段SQL自动代码提示
03-25
codemirror的sql代码提示默认是不支持中文表名自动提示的，在源码中写法只是检索字母数字下划线，加上中文匹配的正则后，终于支持中文表了。修改文件只有sql.js，其他文件只是为了方便打断点，格式化了一下方法
在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...
mysql8.0关键字_MySQL 关键字和保留字汇总（MySQL 8.0）
weixin_30619981的博客
02-18 2948
## MySQL 关键字以及保留字关键字是在SQL中具有重要意义的单词。某些关键字，如[`SELECT`](https://dev.mysql.com/doc/refman/8.0/en/select.html)[`DELETE`](https://dev.mysql.com/doc/refman/8.0/en/delete.html)[`BIGINT`](https://dev.mysql.co...
codemirror 5.2版本实现自定义提示
L_sixmoon的博客
08-03 3173
给codemirror设置新文本后，需要调用refresh方法，才能更新显示内容。需要一个原生textarea作为codemirror的初始化容器。
codemirror 使用 sql 模式时，部分关键字无法智能提示的问题
博客
12-28 2264
解决 codemirror 的 sql 模式关键字提示不完整问题
Codemirror提示关键词/自动提示
liujiawei00的博客
01-16 1万+
Codemirror是一个不错的Web代码编辑库，可以方便简单的集成。没有自动提示功能的代码编辑器是没有灵魂的，Codemirror的自动提示功能是使用show-hint库进行的，我们可以调用showHint方法或者autoComplete方法来显示提示框。 普遍的用法： var editor = CodeMirror.fromTextArea(document.getElementById("c...
codemirror mysql_CodeMirror 实现 JavaScript、 MySql 关键字的变色和自动实时提示 autocomplete...
weixin_34802266的博客
01-27 262
引入静态资源：js 代码实例：/*** 用来实时对用户的输入进行提示*/function showCodeHint(editor) {editor.on("cursorActivity", function () {//获取用户当前的编辑器中的编写的代码var words = editor.getValue() + "";//利用正则取出用户输入的所有的英文的字母words = words.rep...
mySQL控制台字体颜色调整
任伟伟的博客
06-21 4383
1：开始----所有程序----mysql------鼠标右键点击上边框（避免右上角）——--属性--------即可看到窗口。
CodeMirror实现自定义提示功能
smk108的博客
02-18 2万+
我之前在文章《CodeMirror基本使用及实现关键词高亮、自定义主题》中简单介绍了CodeMirror实现自动提示的功能，但是使用的是CodeMirror中封装好的几种指定语法的提示功能，如css、html、js、sql、xml，对应文件如下列表： 现在我开发中有需求做自定义语法的自动提示功能，并没有现成的mode可以使用，学习CodeMirror API和上述几个文件的实现方式之后找到了...
codeMirror自定义关键词颜色颜色
Ccther_cheng的博客
11-09 1724
codeMirror自定义关键词颜色颜色。
MySQL的背景、字体换色
想去见见你的博客
12-02 6787
自从用了数据库，就觉得它的默认设置不太行，至于原因，就是做实验报告的时候几乎全黑不好打印，彩印又不太划算，所以改改背景和字体颜色还是有必要的，至少在我眼中。 今天本想下载MySQL 5.7以上版本来着，结果下载失败，所以就把原来的安装过程重复了一次，就有了换颜色的想法。 首先，点击它上方的白色边框，出现以下画面 选择属性，就可以一般性的修改了，注意一点：建议取消终端颜色的两个选择 在属性中，...
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} /> ); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值