- 综合排序
- 最热优先
- 最新优先
- 来自专栏跟牛老师一起学WEBGIS
monaco-editor做自己的代码测试工具
概述 本文说的是如何通过monaco-editor实现一个类似于codepen一样的在线代码测试工具。 实现代码 1、引入包 npm install monaco-editor --save 2、封装一个组件 <template>
</template> <script> import * as monaco from "monaco-editor"; export default the-code-editor-container width: 100% height: 100% overflow: hidden border: 1px solid #eaeaea text-align: left .monaco-editor2.3K30发布于 2020-03-12 - 来自专栏前端专享
实现一个 Code Pen：（二）在 Next.js 中使用 Monaco Editor
/node_modules/monaco-editor/min/vs/loader.js"></script> <script> require.config({ paths: { vs: '.. monaco-editor/esm/vs/language/json/json.worker', 'css.worker': 'monaco-editor/esm/vs/language/css 采用import * as monaco from 'monaco-editor';这种方式引入的话，会自动带上所有的内置语言和控件，唯一的缺点就是包的体积过大。 优化包大小 需要将全部引入的方式替换为编辑器的核心 api - import * as monaco from 'monaco-editor'; + import * as monaco from 'monaco-editor import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js' import 'monaco-editor/esm/vs
3.4K20编辑于 2022-05-13 - 来自专栏今日前端
打造酷炫透明的 vscode 编辑器
important; } .monaco-editor .selected-text { background-color: rgba(58, 61, 65,0.6) ! important; } .monaco-editor .focused .selected-text { background-color: rgba(38, 79, 120,0.6) ! , .monaco-editor .inputarea.ime-input { background: transparent ! important; } .monaco-editor .selected-text { background-color: rgba(58, 61, 65,0.6) ! , .monaco-editor .inputarea.ime-input { background: transparent !
2K30发布于 2019-07-25 - 来自专栏前端专享
VS code 使用的代码编辑器
npm install monaco-editor 2、需要一个渲染编辑器的容器节点，我们设置是一个 id 为 container 的 div
3、 在 js 文件中引入 monaco editor, 并创建编辑器 import * as monaco from 'monaco-editor/esm/vs/editor /index.js', 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js', 'json.worker': ' monaco-editor/esm/vs/language/json/json.worker', 'css.worker': 'monaco-editor/esm/vs/language/css 在 react 中使用 目前社区已经封装了 @monaco-editor/react， 而且不需要使用 webpack (或 rollup/parcel/etc)配置文件/插件。3.5K20编辑于 2022-03-30 - 来自专栏TopFE
Monaco Editor教程（二）：前端为什么一定要学习monaco-editor
背景 今天这篇文章我就来唠唠，为什么前端开发者要一定要学习monaco-editor这个项目，之所以要写这篇文章，是想和读者们讨论一下，monaco-editor的在编辑器中的地位，以及学会它能够对前端又那些好处 / 另外还有 code-server 之前介绍的 dbt 项目也是使用monaco-editor编辑器。 绝大部分的在线WebIDE项目都是使用的 monaco-editor，像一些数据开发，在线编码，等等。 如果你订阅了我的专栏，那将事半功倍，我的专栏里通俗易懂地讲解了monaco-editor的各种常用特性，如何使用，集成，API的方法，参数详解。还有就是一些常见的业务场景的实现。 总结 WebIDE是前端领域一个非常重要的组成模块，而monaco-editor是WebIDE中的一颗璀璨明珠。
7.1K31编辑于 2023-08-24 - 来自专栏跟牛老师一起学WEBGIS
vconsole助力实现在线代码编辑调试
概述 前面有文章monaco-editor做自己的代码测试工具 ，本文书接前文，在代码中加入vconsole工具，可以进行代码调试、查看网络、查看元素等。 "; import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker? worker'; import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker? worker'; import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker? worker'; import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?
66900编辑于 2024-05-24 - 来自专栏WebJ2EE
【MonacoEditor】：VSCode 代码编辑器
/src/index.tsx', 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js', 'json.worker ': 'monaco-editor/esm/vs/language/json/json.worker', 'css.worker': 'monaco-editor/esm/vs/language /css/css.worker', 'html.worker': 'monaco-editor/esm/vs/language/html/html.worker', 'ts.worker monaco-editor monaco-editor-webpack-plugin 2.4. 怎么初始化？ /index.html https://github.com/Microsoft/monaco-editor https://github.com/Microsoft/monaco-editor-samples
4.7K21发布于 2021-02-26 - 来自专栏WebJ2EE
Diff：如何用 MoncaoEditor 实现 JS 代码比对？
npm install monaco-editor 使用MonacoEditor 配置WebWorkers Moncao Editor 的运行，需要一些 web worker 支撑，它们负责对 Monaco dispose(); 运行效果 完整代码 import { useRef, useEffect } from "react"; import * as monaco from "monaco-editor worker", label ); default: return getWorkerModule( "/monaco-editor / https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite https://github.com /microsoft/monaco-editor
3.9K20编辑于 2023-11-22 - 来自专栏Article
Monaco 代码编辑器主题配置实践
Playground：https://microsoft.github.io/monaco-editor/playground.html const colors = _amdLoaderGlobal.require NOTE: This option cannot be updated using updateOptions() https://microsoft.github.io/monaco-editor/ React 应用 由于前端目前都在使用 Vue 或者 React，图省事的话，我们可以使用第三方的 @monaco-editor/react 库就不需要关心配置相关的事情，开箱即用，底层也是依赖了微软的 monaco-editor ，在业务层我们只需要关心 @monaco-editor/react 提供的 API 即可。
94810编辑于 2024-05-16 - 来自专栏佛曰不可说丶
手摸手打造类码上掘金在线IDE（二）——编辑器篇
有很多jym 对这个一块可能还相当陌生，那么我们就来分别对这两个编辑器的使用方式来一个简单的介绍 monaco-editor monaco-editor 虽然也有vue的版本接入 vue-monaco-editor 但是目前在社区的认可度还不够高，所以暂时不要不要使用 我们还是使用原始的接入方法 // 引入 monaco-editor <template>
< /div> </template> <script lang="ts" setup> import * as monaco from 'monaco-editor' import { onMounted 本质上又不是一个东西 vscode 使用的是 vscode-textmate 来解解析，做的关联，但是monaco-editor这玩意没有啊？ 所以咱们的残废版码上掘金，我要毅然决然的选择 monaco-editor 毕竟有难度，才够装x,面试官才能能佩服，佩服才能高薪，高薪才能走向人生巅峰！3.3K12编辑于 2022-11-11来自专栏跟牛老师一起学WEBGIS如何进行地图SDK开发（二）——示例文档
技术点 vue3 vite element-plus monaco-editor 实现后效果 实现 1. -S添加monaco-editor依赖。 引入monaco-editor 首先在/src/views/home/index.vue的script添加引入： import * as monaco from 'monaco-editor/esm/vs worker'; import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker? worker'; import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?
1.2K21编辑于 2023-01-09来自专栏一个会写诗的程序员的博客Monaco Editor Webpack Loader Plugin
] }] }, plugins: [ new MonacoWebpackPlugin() ] }; index.js: import * as monaco from 'monaco-editor ' // or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; // if shipping only a subset 参考资料 https://github.com/microsoft/monaco-editor https://github.com/microsoft/monaco-editor/blob/main/ samples/browser-esm-webpack-typescript-react/src/components/Editor.tsx https://microsoft.github.io/monaco-editor
1.8K30编辑于 2022-05-13来自专栏神光的编程秘籍如何在网页实现 TypeScript 编辑器？
安装依赖： npm install npm install @monaco-editor/react 这里用 @monaco-editor/react 这个包，它把 monaco editor 封装成了 去掉 main.tsx 里的 index.css 然后在 App.tsx 用一下： import MonacoEditor from '@monaco-editor/react' export default 这样： import MonacoEditor, { OnMount } from '@monaco-editor/react' export default function App() { 今天我们基于 @monaco-editor/react 实现了 TypeScript 编辑器。 可以在 options 里配置滚动条、字体大小、主题等。
1K10编辑于 2024-04-30来自专栏前端专享开发一个在线代码对比工具
马上掘金 使用 monaco-editor 创建一个简单的代码编辑器 使用 monaco-editor 创建一个简单的 Diff 编辑器 Monaco Editor 有 2 种加载方式，分别是 amd 实现 Diff Editor import type { editor as MonacoEditor } from 'monaco-editor' import { useEffect, useRef , useState } from 'react' import * as monaco from 'monaco-editor' export default function TextDiffPage
3.8K11编辑于 2022-09-21来自专栏token的技术分享WPF使用Blazor的快速案例
<script> var require = { paths: { 'vs': 'https://cdn.masastack.com/npm/monaco-editor/0.34.1/min/vs ' } }; </script> <script src="https://cdn.masastack.com/npm/<em>monaco-editor</em>/0.34.1/min/vs/loader.js"></ script> <script src="https://cdn.masastack.com/npm/<em>monaco-editor</em>/0.34.1/min/vs/editor/editor.main.nls.js "></script> <script src="https://cdn.masastack.com/npm/<em>monaco-editor</em>/0.34.1/min/vs/editor/editor.main.js
91240编辑于 2023-10-13来自专栏全栈程序员必看vue代码编辑器组件_vue activiti
onCodeChange(editor) { console.log(this.editor.getValue()); } } }; Webpack Use By default, monaco-editor To use a local copy of monaco-editor with webpack, we need to expose the dependency in our build directory module.exports = { plugins: [ new CopyWebpackPlugin([ { from: ‘node_modules/monaco-editor
1.4K20编辑于 2022-09-21来自专栏前端专享实现一个 Code Pen：（三）10 行代码实现代码格式化
在上文中，我们使用 monaco-editor 结合 Next.js，打造了编辑器的功能，在本文中，我们将继续优化 monaco-editor， 使它拥有代码格式化的功能。 集成到 monaco-editor monaco-editor 本身也提供了格式化的命令，可以通过右键菜单或者快捷键⇧ + ⌥ + F来对代码进行格式化，目前自带的格式化工具不如 Prettier 的标准 import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; const modelToPaser={ html css,
2K10编辑于 2022-05-13借助 CodeBuddy，我见证了一款在线代码格式化神器的诞生
它首先用 Vite 初始化了 Vue3 项目，并立即装好了我提到的 monaco-editor、@monaco-editor/loader 和 prettier。 特别让我印象深刻的是，Editor.vue 中 monaco-editor 的集成写得非常稳，加载逻辑简洁明确，还支持自动语言检测。 最后，为了解决压缩模块 vite 模式下无法正常加载的问题，CodeBuddy 主动排查 import 失败的原因，修复了 monaco-editor 的 loader 引用方式，并最终稳定地启动了开发服务器
29200编辑于 2025-05-16来自专栏crmeb使用 Monaco Editor 开发 SQL 编辑器
}, }, plugins: [new MonacoWebpackPlugin()], }, ...}复制代码请注意 monaco-editor-webpack-plugin 和 monaco-editor "editor-container" :style="{ height: height + 'px' }" /></template><script>import * as monaco from 'monaco-editor * 编辑器默认 sql 语言，支持的语言请参考 node_modules\monaco-editor\esm\vs\basic-languages 目录下~ * 编辑器样式仅有 'vs', 'vs-dark dimi: ['ads_adid', 'ads_spec_adid_category'],}复制代码然后根据已有库表信息进行自定义 AutoCompleteimport * as monaco from 'monaco-editor'import { language } from 'monaco-editor/esm/vs/basic-languages/sql/sql'const { keywords } = languageexport
3.8K31编辑于 2022-08-05来自专栏owentWebpack+vue+boostrap+ejs构建Web版GM工具
webpack.ProvidePlugin({ moment: "moment", $: "jquery", jQuery: "jquery" }) ] } 集成VSCode: monaco-editor 和 typescript 支持 我们GM工具里内嵌了VSCode的编辑器内核 monaco-editor ，在通用信息查看编辑和diff上还是很有用的。 然后由于 monaco-editor 依赖 typescript 就顺便把 typescript 也导入进来了。 安装脚本: npm install monaco-editor --save npm install monaco-editor-webpack-plugin typescript vue-ts-loader
3.2K32发布于 2018-10-22
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号