monaco-editor 实现配置

最新推荐文章于 2024-09-13 21:55:59 发布

sunshine0670

最新推荐文章于 2024-09-13 21:55:59 发布

阅读量762

点赞数

分类专栏：前端组件使用文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/lifangfang0607/article/details/120268790

版权

本文介绍了如何在Vue项目中集成monaco-editor，通过使用monaco-editor-webpack-plugin进行配置。同时，由于项目需求，需要支持jinja2语法，而插件默认不包含，因此可能需要自定义设置。若条件允许，可以考虑使用内置的twig语法作为替代，因为两者语法相近。

摘要由CSDN通过智能技术生成

使用monaco-editor来实现项目中的编辑器，同事需要安装webpack插件monaco-editor-webpack-plugin来配合使用。如下：

npm install monaco-editor --save
npm install monaco-editor-webpack-plugin --save-dev # webpack 4.x 以上版本不需要，可以试一下

vue.config.js中：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

// webpack 配置
chainWebpack

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sunshine0670

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

monaco-editor设置语言、值等

Yajyaj123的博客

05-02

1658

monaco-editor设置语言、值等

MonacoEditor 配置

qq_40131635的博客

07-27

4208

<template> <div class="monaco-container"> <div ref="container" class="monaco-editor"></div> </div> </template> <script> import * as monaco from "monaco-editor"; export default { name: "MonacoEd.

2 条评论您还未登录，请先登录后发表或查看评论

Monaco Editor 安装和配置指南

热门推荐

云海梦尘的博客

09-03

1万+

官网API地址： https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html 直接前往 Const EditorOptions EditorOptions: { acceptSuggestionOnCommitCharacter: IEditorOption<acceptSuggestionOnCommitCharacter, boolean>; acceptSuggestionOnEnter: IEdito

Monaco-editor 常用配置项

weixin_43951388的博客

08-18

6952

Monaco编辑器

vscode更改配置文件路径_VScode 修改主题配置

weixin_39986543的博客

12-20

1527

"activityBar.background": "#580000", //活动栏背景色"tab.inactiveBackground": "#300a0a", //非活动选项卡的背景色"tab.activeBackground": "#490000",//活动选项卡的背景色。"sideBar.background": "#330000",//侧边栏背景色。"statusBar.backgrou...

react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴

03-27

React-Monaco-Editor则将Monaco Editor的灵活性和React的组件化思想完美融合，使得在React项目中实现代码编辑功能变得更加简单。 2. **源码分析** 提供的源码可以用于深入理解React-Monaco-Editor的工作原理。通过...

vue2-monaco-editor

04-06

Vue2.0 + Monaco Editor 实现在 web 页面中编辑 C#代码,并包含代码提示功能 Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build ...

vue-monaco-editor:摩纳哥编辑Vue组件

04-21

- **选项配置**：Vue-Monaco-Editor允许通过`options`属性传递Monaco Editor的配置对象，以实现更多自定义功能。 - **事件监听**：组件提供了多种事件监听，例如`initialize`、`change`、`cursorMove`等，以便在编辑...

monaco-editor做自己的代码测试工具

01-08

要使用Monaco Editor构建类似CodePen的在线代码测试工具，首先需要安装Monaco Editor库。可以通过以下命令将它添加到项目中： ```bash npm install monaco-editor --save ``` 3. 封装组件：在Vue.js等前端...

monaco-editor-locales-plugin:用于monaco-editor语言环境设置的Webpack插件

05-06

摩纳哥编辑器语言环境插件用于monaco-editor语言环境设置的Webpack插件安装 npm install --save-dev monaco-editor-locales-plugin 用法 webpack配置 module . exports = { ... plugins : [ new MonacoLocalesPlugin ( { /** * support languages list, .eg ["de"] * embed language base on monaco-editor@0.14.6 * all available embed languages: de,es,fr,it,ja,ko,ru,zh-cn,zh-tw

Monaco Editor系列（六）Range详解、Uri 自动匹配语言模型、缩略图 miniMap 配置

weixin_45855469的博客

06-04

1079

前情回顾：一鼓作气，再鼓，再鼓！！哈哈哈。争取早日占领 Monaco 领地。上一篇文章讲到的三个功能分别是 Position 类型、设置 markers、指定位置插入或替换内容涉及到的知识点：⛈️ 获取光标位置：⛈️ 获取某个位置处的单词：这一篇文章继续来探索更多的功能吧！遨游在 monaco editor 的世界里是不是很快乐啊哈哈哈哈（bushi，大佬写的非常好，是少有的成系列的学习 Monaco Editor 的学习资料，并且有很多总结性的东西都给总结好了。

monaco editor + vue的配置

weixin_34067980的博客

07-28

1058

monaco editor是vscode的御用编辑器。功能非常强大，使用方便轻巧，对js\ts等等语言支持都良好，能方便的扩展以支持其他语言或者自定义的特性。夸了这么多，这里只说它一个问题: 这货和vue不兼容。解决这个问题很简单，使用vue-monaco-editor即可，可以通过npm安装。 npm install vue-monaco-editor --sav...

在 umijs 项目中使用 Monaco Editor 的配置

寬真

04-11

2735

umi中使用 Monaco Editor，一开始没有代码没颜色，按照react-monaco- editor的官方文档，需要配置文本pack，一开始不知道如何配置，所以做下记录在 umijs 项目中使用 Monaco Editor 的配置安装相关包 yarn add monaco-editor、yarn add monaco-editor-webpack-plugin、yarn add rea...

Monaco Editor教程（十六）：缩略图minimap的配置详解

知无涯

11-17

3876

详细解析monaco中minimap的详细配置。在大文件和表现文件结构有很好的用处。

Monaco Editor教程（二二）：monaco编辑器完整配置翻译及重点配置解析

知无涯

02-13

4807

本篇文章讲解一下创建Monaco编辑器时所有完整配置，算是一个比较浅显的入门文章。这里结合实际的项目业务场景介绍一些常用的，有可能修改的默认配置参数。Monaco已经默认了很多配置参数的值，而这些默认值应该适合大多数场景。那么多属性不是一下子能给记下来的，完整地翻译下来也只是有个印象而已。又一个很大的好处就是可以用中文搜索啦。哈哈哈。。。。

Monaco Editor编辑器教程（三二）：使用中文菜单，配置编辑器国际化

知无涯

07-18

4429

最近有网页提问如何将编辑器的菜单改成中文的，简单写一篇文章。// 使用addExtraLib添加额外库，增强体验。

monacmonaco-editor使用

ronon77的专栏

01-29

2013

monaco-editor使用 monaco-editor是一款非常好用的web代码编辑器，那么如何把他加到自己的项目中呢。 1.下载插件 npm install monaco-editor@0.8.3 2.初始化编辑器值 1 2  <div id="container"></div...

monaco-editor 实现vue代码编写

08-31

Monaco Editor 是一个基于浏览器的代码编辑器，可以用于实现 Vue 代码编写。下面是一些步骤可以帮助你在 Vue 中使用 Monaco Editor： 1. 首先，安装 monaco-editor 的 npm 包： ``` npm install monaco-editor ``` 2. 在你的 Vue 组件中引入 monaco-editor： ```javascript import * as monaco from 'monaco-editor'; ``` 3. 创建一个容器元素，在其中初始化 Monaco Editor： ```html <div id="editorContainer"></div> ``` 4. 在 Vue 的 `mounted` 生命周期钩子中，对 Monaco Editor 进行初始化： ```javascript mounted() { const editorContainer = document.getElementById('editorContainer'); monaco.editor.create(editorContainer, { language: 'javascript', theme: 'vs-dark' // 或者其他主题 }); } ``` 这样，你就可以在 Vue 组件中使用 Monaco Editor 来编辑 Vue 代码了。当然，你还可以根据需要进行更多的配置和自定义，例如设置语言、主题、快捷键等等。希望对你有帮助！