记录一次monaco-editor实现的sql编辑器

最新推荐文章于 2024-07-07 14:48:14 发布
最新推荐文章于 2024-07-07 14:48:14 发布
阅读量3.2k 收藏 7
点赞数 2
文章标签： 编辑器 sql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43318297/article/details/121990550
版权

项目背景：项目需要前端提供一个sql语句的编辑器，供语句查询可视化。
技术框架：vue + monaco-editor
实现功能：语法提示，自动补全，语言高亮，主题切换，自适应，单行选中，格式化，主题切换
1：语法提示，monaco-editor编辑器有多种内置的编辑器语法，注册了几个默认的内置语言，“javascript”,“css”,“html”,“json”。如果需要注册其他语言，那么办法来了，在monaco-editor插件包中已经帮我们集成了大部分语言配置，路径：monaco-editor/esm/vs/basic-languaages/xxx，以sql为例。
在这里插入图片描述
注册语言，keys的值是sql语言的内置值，主要匹配关键字做提示，那么同理，如果需要自定义的语言提示，在suggestions中增加匹配的逻辑然后return出去。
在这里插入图片描述在这里插入图片描述

2语言高亮
在这里插入图片描述
3主题切换
在这里插入图片描述

4自适应
在这里插入图片描述
5单行选中
在这里插入图片描述
6格式化
在这里插入图片描述

在这里插入图片描述
7主题切换，主题可以自己设定，图中是默认的编辑器主题
在这里插入图片描述

rc980209
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于monaco-editor的sql编辑器，支持sql语法联想、高亮.zip
06-08
基于monaco-editor的sql编辑器，支持sql语法联想、高亮.zip基于monaco-editor的sql编辑器，支持sql语法联想、高亮.zip基于monaco-editor的sql编辑器，支持sql语法联想、高亮.zip基于monaco-editor的sql编辑器，支持...
monaco-editor实现的sql编辑器
02-22
总的来说，这个基于Monaco-Editor的SQL编辑器是一个实用的开发工具，尤其适合需要在线编辑SQL的Web应用。尽管目前在错误校验方面有所欠缺，但其丰富的功能和良好的用户体验仍值得推荐。开发者可以在此基础上进一步...
Vue2的SQL编辑器 - monaco的基本使用
我码玄黄的博客
11-11 1422
本文在vue中实现了一个基本的SQL编辑器，包括语法高亮，关键字补全，表名，字段名补全等功能。
vue2 monoca-editor使用SQL：自动补全、自定义颜色、格式化代码、标记错误
m0_37378152的博客
10-11 5248
vue2 monoca-editor使用SQL：自动补全、自定义颜色、格式化代码、标记错误
PHP多媒体内容管理系统
最新发布
2301_79305643的博客
07-07 589
摘。
常用项目插件
ssy001128的博客
12-05 1356
前端可以进行复制文字操作的插件
现一个智能的SQL编辑器
程序员辰风的博客
11-07 2943
Monaco Editor 提供了方法，用来自定义 language/***/id: string;extensions?: string[];filenames?: string[];: string[];firstLine?: string;aliases?: string[];mimetypes?: string[];: Uri;第一步，我们需要注册一个 language， 配置项中 id 对应的就是语言名称（其他配置项可以暂时不填），这里自定义的 language 名为。
使用Monaco Editor实现SQL和Java代码提示
DevNinja的博客
09-21 1524
你可以从官方网站（https://microsoft.github.io/monaco-editor/）下载最新版本的库文件，并将其包含在你的HTML文件中。通过加载相应的语言支持文件和使用提供的API，我们可以轻松地为代码编辑器添加丰富的代码提示功能。如果你想为SQL或Java代码添加自定义的代码提示，你可以使用Monaco Editor的提供的API来实现。回调函数中，我们返回一个包含三个代码提示项的对象，每个代码提示项都有一个标签（label）、类型（kind）和插入文本（insertText）。
Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等
04-18 6494
代码提示代码高亮右键有菜单代码搜索。
react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴
03-27
React-Monaco-Editor是一款基于Microsoft的Monaco Editor构建的React组件，它允许开发者在React应用中集成一个功能强大的代码编辑器，尤其适用于Web开发中的代码编辑、预览和调试场景。Monaco Editor是VS Code的核心...
vue中实现Monaco Editor自定义提示功能
10-16
Monaco Editor是一款强大的Web代码编辑器，源自微软的VSCode项目，为浏览器环境提供了类似于VSCode的代码编辑体验。它支持多种编程语言，并允许开发者自定义各种功能，包括提示功能。 首先，安装Monaco Editor库： ...
基于CodeMirror的一个在线sql编辑工具
04-17
* 左侧提供数据库表字段树形结构，可拖拽到sql编辑框。 * 输入首字母可提示表名字段名（表名字段名可自定义） 。 *括号高亮匹配。 * 执行与中断功能。 * 自定义外部接口获取sql关键词、函数、表字段等，用于sql编辑时提示补全,键盘录入后自动提示，上下键选择，tab键或点击选中项自动补全。 * sql格式化。
Vue3，使用monaco-editor实现sql对比编辑器，自定义高亮
weixin_47239456的博客
04-07 1963
vue3，实现 monaco.editor对比
使用v-md-editor开发sql查看器--实战
蜗牛跑的快
11-24 653
sql 查看器，借助v-md-editor实现sql在线查看器，
金色传说：SAP-ABAP-SAPLINK SQL编辑器插件
SAPABAP金色传说的博客
03-28 1188
比SAP官方自带功能好用一万倍的SQL编辑器ZTOAD!
封装monaco-editor （sql）编辑器（Vue简略）
伐木小屋
06-14 1406
Monaco Editor 是一款开源的在线代码编辑器，它是 VSCode 的浏览器版本。
monaco-editor编辑器实现数据提示功能
zhou_xiaozhou的博客
03-14 3845
这一套用来实现最终效果对传入的数据是有格式要求的!我们前台的项目技术：vue + element UI。输入 "." 的时候编辑器会提示出下一段的数据。以上数据存在list里传给前台即可。
vue3 使用 monaco-editor 自定义代码补全。
yyXieDaiMa的博客
04-17 6404
*** 注册：自定义语法补全* @param language 语言类型* @param constValues 常量提示*/// 获取当前行数// 获取当前列数// 获取当前输入行的所有内容// 通过下标来获取当前光标后一个内容，即为刚输入的内容label: e,detail: '常量配置',}))//拦截到用户输入$，开始设置提示内容，同else中代码一致，自行拓展// 直接提示，以下为sql语句关键词提示label: e, // 显示的提示内容。
解决 Monaco Editor 添加自定义提示后导致内置单词消失问题
qq_17209641的博客
10-22 2080
像这样添加自定义提示后，内置单词提示消失了 this.monaco.languages.registerCompletionItemProvider('javascript', { provideCompletionItems: function(model, position) { // var textUntilPosition = model.getValueInRange({startLineNumber: position.lineNumber, startColumn: 1, e
vue3 monaco-editor sql实现
06-28
Vue3 中使用 Monaco Editor 实现 SQL 编辑器是一个常见的任务，因为 Monaco Editor 提供了强大的代码编辑和高亮功能，适合于多种编程语言，包括 SQL。以下是如何在 Vue3 中集成 Monaco Editor 的步骤： 1. **安装依赖**: 首先确保已经安装了 Vue 和 Monaco Editor。可以通过 npm 或者 yarn 安装： ```bash npm install vue@next monaco-editor # 或者 yarn add vue@next monaco-editor ``` 2. **引入并注册组件**: 在你的 Vue 组件中引入 MonacoEditor 组件，并将它注册为自定义组件： ```javascript import { createApp } from 'vue'; import MonacoEditor from 'monaco-editor.vue'; createApp(App).component('MonacoEditor', MonacoEditor); ``` 3. **配置组件**: 使用 `monaco.editor.create` 创建一个 Monaco 编辑器实例，并将 SQL 相关设置传递进去，如语言模式（`'sql'`）、初始代码等： ```html <template> <div> <MonacoEditor :value="sqlCode" :language="languageMode" :options="editorOptions" ></MonacoEditor> </div> </template> <script> export default { data() { return { sqlCode: '', // 初始的 SQL 代码 languageMode: 'sql', // SQL 语言模式 editorOptions: { lineNumbers: true, // 显示行号 wordWrap: 'on', // 自动换行 gutters: ['lineNumbers'], // 显示边距 }, }; }, // ... }; </script> ``` 4. **事件处理**: 如果需要监听编辑器的变化或保存操作，可以添加相应的事件处理器，如 `beforeModelChange` 和 `save`： ```javascript methods: { handleBeforeModelChange(editor, event) { // 在修改前做校验或记录操作 }, handleSave() { const sql = editor.getValue(); // 获取编辑器中的 SQL 代码 // 处理保存逻辑，例如提交到服务器 }, }, ``` 在 `<MonacoEditor>` 标签上绑定这些方法作为事件处理器。 5. **实时编辑和语法高亮**: Monaco Editor 自带了语法高亮，当设置的语言模式为 SQL 时，它会自动识别 SQL 语法并进行高亮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值