方案一:使用monaco-editor-esm-webpack-plugin 依赖下载 npm install monaco-editor-esm-webpack-plugin --save-dev npm install monaco-editor monaco-editor-webpack-pluginmonaco-editor-nls vue.config.js文件 const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin'); configureWebpack: { pl...
利用 Monaco Editor 的 getPositionAt获取链接文本在编辑器中的位置(起始/结束行列信息),生成Range。 使用一个容器收集对应的日志中的Link信息。在通过linkProvider将编辑器中对应的链接文本识别为链接高亮。 给editor 实例绑定点击事件onMouseDown,如果点击的内容位置在收集的 Link 中时,触发对外提供的自定义链接点击函数...
editor.getSelection(); //获取选中的行信息 editor.getModel().getLineContent(1); //获取某一行的内容 editor.getModel().getLinesContent(); //获取每一行的内容 monaco.editor.setTheme('vs-dark'); //设置主题 editor._configuration._rawOptions.language //获取编辑器当前语言(初始化值) editor.getModel...
在使用 @monaco-editor/react 库,会通过CDN去加载编辑器的资源 但有时候,我们所需要的环境,并不能直接去访问外网,故我们需要将这些资源改变成本地加载 首先我们需要一个公共位置去存放这些资源,如 vite 的public 文件夹等等 我们需要把 monaco-editor 库下载下来,主要是需要 「min/vs」 内容,提供给编辑器 其实还...
而Monaco Editor(下文简称monaco)就是从这个项目中成长出来的一个web编辑器, 他们很大一部分的代码(monaco-editor-core)都是共用的,所以monaco和VSCode在编辑代码, 交互以及UI上几乎是一摸一样的,有点不同的是,两者的平台不一样, monaco基于浏览器,而VSCode基于electron,所以功能上VSCode更加健全,并且性能比较强大。
monaco-editor是一款非常好用的web代码编辑器,那么如何把他加到自己的项目中呢。 1.下载插件# npm install monaco-editor@0.8.3 2.初始化编辑器值# 1 2 <!--要绑定的对象--> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var monacoEditor; //设置插件路径 require.config({ paths...
使用编辑器对json与xml进行格式化与编辑,由于项目是老项目使用的是Vue2版本,所以版本相当重要,版本容易报错。 安装 我这里安装的版本是0.21.3版本,其他版本都有问题,Vue是2.6.11版本,webpack是4.28.4版本。然后我这里也使用了monaco-editor-webpack-plugin插件,我这里使用的是2.1.0版本。安装方法如下。
npm install monaco-editor 2.在 vue.config.js 中配置 config.plugin('monaco-editor').use(MonacoWebpackPlugin, [ { // Languages are loaded on demand at runtime languages: ['json', 'go', 'css', 'html', 'java', 'javascript', 'less', 'markdown', 'mysql', 'php', 'python', 'scss...
笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持在浏览器中运行,但是功能基本是和VSCode一样强大的,所以在笔者看来Monaco Editor等于VSCode的编辑器核心。