yarn add monaco-editor@0.29.1 yarn add monaco-editor-webpack-plugin@5.0.0 -D 二、配置vue.config.js const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') module.exports = { configureWebpack: { plugins
在Vue 3项目中实现使用monaco-editor进行多开SQL编辑窗口、选中SQL运行并在下方显示运行接口的功能,可以按照以下步骤进行: 1. 集成monaco-editor到Vue3项目中 首先,需要安装monaco-editor和@monaco-editor/react(虽然这是React的绑定,但可以通过类似的方式在Vue中使用)。不过,Vue项目通常直接使用monaco-editor即可,因为...
本文在vue中实现了一个基本的SQL编辑器，包括语法高亮，关键字补全，表名，字段名补全等功能 细节功能等尚未进行完善，仅作学习使用 效果如下：在这里插入图片描述 准备工作 本文在vue-cli创建的项目中，使用vue2 需要安装两个包 "monaco-editor":"0.30.0",// 编辑器主体"monaco-editor-webpack-plugin":"6.0...
import * as monaco from 'monaco-editor' /** * VS Code 编辑器 * * 通过 getEditorVal 函数向外传递编辑器即时内容 * 通过 initValue 用于初始化编辑器内容。 * 编辑器默认 sql 语言,支持的语言请参考 node_modules\monaco-editor\esm\vs\basic-languages 目录下~ * 编辑器样式仅有 'vs', 'vs-dark'...
先处理 monaco-editor-webpack-plugin 在vue.config.js中添加 // 把 monaco webpack plugin 搞进去constMonacoWebpackPlugin=require('monaco-editor-webpack-plugin');module.exports={configureWebpack:config=>{config.plugins.push(newMonacoWebpackPlugin({languages:["sql"],// 目前只处理SQL语言features:["co...
在vue项目中使用monaco-editor插件实现代码编辑器功能(以及sql格式化功能),程序员大本营,技术文章内容聚合第一站。
// 从 monaco-editor 的 sql 里面拿到关键字 const { keywords } = language; export default { name: "App", data() { return { // 编辑器实例 monacoEditor: null, // 原本已经写入的数据 value: "SELECT * FROM users;\n\nSELECT * FROM roles;", ...
},methods:{initEditor(){// 初始化编辑器,确保dom已经渲染this.editor= monaco.editor.create(document.getElementById('container'), { value:'',//编辑器初始显示文字language:'sql',//语言支持自行查阅demoautomaticLayout:true,//自动布局theme:'vs-dark'//官方自带三种主题vs, hc-black, or vs-dark})...
language: 'sql' // 这里以sql为例 }) this.fileEditor.dispose(); // 使用完后销毁 这里引入monaco要注意,在react中以下面方式引入: import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; 实现自定义提示功能 查看了资料后,发现在monaco中有提供一个提示功能的方法registerCompletionItemProvide...
website 中的代码也参考了,本地能正常启起来,看代码中用了 @dtinsight/molecule 这个 ide,但是直接用 monaco-editor 就会报错,不知道是我哪里没有配置对。 xinyufyjchanged the titleVue3 + Vite4 加载 monaco-sql-languages package 报错Aug 28, 2023 ...