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

最新推荐文章于 2024-04-07 16:53:17 发布
最新推荐文章于 2024-04-07 16:53:17 发布
阅读量3.1k 收藏 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为例）
weixin_33858249的博客
08-08 2521
monaco editor ：https://www.cnblogs.com/XHappyness/p/9414177.html 这里实现自己定义的提示： .vue <template> <div> <div id="container" ></div> </div> </template>...
react-monaco-editor：摩纳哥的React编辑器
02-05
React摩纳哥编辑 React的。 例子 要在本地构建示例，请运行： yarn cd example yarn yarn start 然后在浏览器中打开http://localhost:8886 。 安装 yarn add react-monaco-editor 与Webpack一起使用 import React from 'react' ; import { render } from 'react-dom' ; import MonacoEditor from 'react-monaco-editor' ; class App extends React . Component {
Vue3中使用Monaco Editor代码编辑器记录——主动触发代码补全功能（python和sql为例）～持续更新
weixin_43977534的博客
03-29 9400
Vue3中使用Monaco Editor代码编辑器记录——主动触发代码补全功能，本文主要以python和sql为例，extending-language-services-completion-provider-example
Vue3，使用monaco-editor实现sql对比编辑器，自定义高亮
最新发布
weixin_47239456的博客
04-07 524
vue3，实现 monaco.editor对比
vue3 monoca-editor SQL：自动补全、自定义颜色、格式化代码、标记错误
m0_37378152的博客
10-10 4254
vue3 monoca-editor使用SQL：自动补全、自定义颜色、格式化代码、标记错误
rollup-plugin-monaco-editor:用于导入摩纳哥编辑器的汇总插件
08-04
汇总插件摩纳哥编辑器 一个汇总插件导入摩纳哥编辑器 摩纳哥编辑器版本 目前，这个插件支持monaco-editor@0.21.* ~ 0.26.* 。 以下版本已在本地测试： 0.21.2 0.22.3 0.24.0 0.25.0 0.26.1 用法 此插件应与其他插件一起使用。 包含 @rollup/plugin-node-resolve rollup-plugin-postcss （或其他插件可以处理.css文件） @rollup/plugin-commonjs // rollup.config.js import { nodeResolve } from '@rollup/plugin-node-resolve' ; import postcss from 'rollup-plugin-postcss' ; import commonjs from '@rollup
基于CodeMirror的一个在线sql编辑工具
04-17
* 左侧提供数据库表字段树形结构，可拖拽到sql编辑框。 * 输入首字母可提示表名字段名（表名字段名可自定义） 。 *括号高亮匹配。 * 执行与中断功能。 * 自定义外部接口获取sql关键词、函数、表字段等，用于sql编辑时提示补全,键盘录入后自动提示，上下键选择，tab键或点击选中项自动补全。 * sql格式化。
使用 Monaco Editor 开发一个 SQL 编辑器
CRMEB小程序商城的博客
08-05 1339
请注意 monaco-editor-webpack-plugin 和 monaco-editor 的对应关系，否则可能会出现无法运行的情况。**
vue2 monoca-editor使用SQL：自动补全、自定义颜色、格式化代码、标记错误
m0_37378152的博客
10-11 4211
vue2 monoca-editor使用SQL：自动补全、自定义颜色、格式化代码、标记错误
常用项目插件
ssy001128的博客
12-05 1265
前端可以进行复制文字操作的插件
现一个智能的SQL编辑器
程序员辰风的博客
11-07 2586
Monaco Editor 提供了方法，用来自定义 language/***/id: string;extensions?: string[];filenames?: string[];: string[];firstLine?: string;aliases?: string[];mimetypes?: string[];: Uri;第一步，我们需要注册一个 language， 配置项中 id 对应的就是语言名称（其他配置项可以暂时不填），这里自定义的 language 名为。
monaco-editor实现的sql编辑器
02-22
monaco-editor实现的包含基本功能的sql编辑器，主要功能包含：sql关键字提示，自定义关键字提示，自定义主题，sql代码格式化，切换是否可编辑，文本插入等。暂不支持自定义错误校验的格式。
react-monaco-editor:摩纳哥React的编辑器，它是react-monaco-editor和@ monaco-editorreact的组合
05-10
@ rimoe / react-monaco-editor 摩纳哥React编辑器 和。 npm i @rimoe/react-monaco-editor yarn add @rimoe/react-monaco-editor 与react-monaco-editor相比，您不需要配置webpack，因为我们使用的是与@ monaco-editor / react相同的可取消加载程序。 关于Monaco Editor的核心代码类似于react-monaco-editor。 但是，我们还没有DiffEditor 。 该项目中的大多数代码都是从和复制的。 他们俩都是麻省理工学院的执照。
react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴
03-27
react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴
monaco-editor-esm-webpack-plugin
05-30
monaco-editor-esm-webpack-plugin 它依赖于 。 如果你想复制一个带有本地化的 monaco 编辑器，你可以看到 用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。 安装 npm install monaco-editor-...
Vue2的SQL编辑器 - monaco的基本使用
我码玄黄的博客
11-11 1307
本文在vue中实现了一个基本的SQL编辑器，包括语法高亮，关键字补全，表名，字段名补全等功能。
使用Monaco Editor实现SQL和Java代码提示
DevNinja的博客
09-21 1005
你可以从官方网站（https://microsoft.github.io/monaco-editor/）下载最新版本的库文件，并将其包含在你的HTML文件中。通过加载相应的语言支持文件和使用提供的API，我们可以轻松地为代码编辑器添加丰富的代码提示功能。如果你想为SQL或Java代码添加自定义的代码提示，你可以使用Monaco Editor的提供的API来实现。回调函数中，我们返回一个包含三个代码提示项的对象，每个代码提示项都有一个标签（label）、类型（kind）和插入文本（insertText）。
Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等
04-18 6076
代码提示代码高亮右键有菜单代码搜索。
MonacoEditor 自动格式化sql json数据
听见涛声
10-21 5870
monaco-editor自动格式化 美化SQL json
monaco-editor实现多文件编辑
05-17
Monaco Editor 是一个非常强大的在线代码编辑器，它是 Visual Studio Code 的核心编辑器。Monaco Editor 支持多文件编辑，可以在同一个编辑器窗口中打开多个文件，实现多文件编辑。 要实现多文件编辑，可以使用 Monaco Editor 提供的 `editor.createModel()` 方法创建多个模型，每个模型对应一个文件。然后，可以使用 `editor.setModel()` 方法将一个模型关联到编辑器上。通过这种方式，可以在一个编辑器窗口中打开多个文件。 以下是一个简单的示例，演示如何在 Monaco Editor 中实现多文件编辑： ```javascript // 创建两个模型 var model1 = monaco.editor.createModel('Hello, world!', 'text/plain'); var model2 = monaco.editor.createModel('function add(a, b) {\n return a + b;\n}', 'text/plain'); // 创建编辑器 var editor = monaco.editor.create(document.getElementById('container'), { model: model1 }); // 切换模型 function switchModel(model) { editor.setModel(model); } // 在 UI 中显示多个文件 var file1 = document.createElement('div'); file1.textContent = 'File 1'; file1.addEventListener('click', function() { switchModel(model1); }); document.body.appendChild(file1); var file2 = document.createElement('div'); file2.textContent = 'File 2'; file2.addEventListener('click', function() { switchModel(model2); }); document.body.appendChild(file2); ``` 在上面的示例中，我们创建了两个模型（`model1` 和 `model2`），分别对应两个文件。然后，我们创建了一个编辑器，并将其关联到第一个模型。最后，我们在 UI 中创建了两个元素，分别对应两个文件，点击这些元素可以切换编辑器中显示的模型。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值