monaco-editor自定义定制/扩展其他语言

于 2024-08-12 13:00:59 发布
阅读量43 收藏
点赞数
分类专栏： 前端 vue 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51431448/article/details/141128471
版权
前端 同时被 2 个专栏收录
107 篇文章 2 订阅 ¥29.90 ¥99.00
订阅专栏 超级会员免费看
vue
77 篇文章 0 订阅 ¥15.90 ¥99.00
订阅专栏 超级会员免费看

之前写了monaco-editor在vue2、vue3中的使用，博文连接如下：

vue2使用monaco-editor

Vue3使用Monaco-editor 

但是没考虑到语言的问题。因为当时都是用json，json在monaco-editor内置了。

目前monaco-editor内置有61种语言，但是只对css、html、json、typescript 支持的，功能也比较全。我们要是使用其他的语言比如javascript、java、sql等可能会报错，使用上面内置的四种语言之外的其他语言就需要我们自己定制、扩展了。

monaco-editor官网地址

教大家怎么看monaco-editor的官方文档 

我这边写了最常用的javascript、java、sql基础扩展支持。代码如下：


                

        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  会说法语的猪
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
Vue3使用Monaco-editor

				
			

			

				

					m0_51431448的博客
				

				

					11-01
					
					5122
					
				

			

		

		

			
				
Monaco-editor，一个vs code 编辑器，需要将其继承到项目。不说闲话了，直接上代码。

			
		

	



                

              
                



	

		

			

				
					
vue3 使用 monaco-editor 自定义代码补全。

				
			

			

				

					yyXieDaiMa的博客
				

				

					04-17
					
					6444
					
				

			

		

		

			
				
*** 注册：自定义语法补全* @param language 语言类型* @param constValues 常量提示*/// 获取当前行数// 获取当前列数// 获取当前输入行的所有内容// 通过下标来获取当前光标后一个内容，即为刚输入的内容label: e,detail: '常量配置',}))//拦截到用户输入$，开始设置提示内容，同else中代码一致，自行拓展// 直接提示，以下为sql语句关键词提示label: e, // 显示的提示内容。

			
		

	



                


  
              

                


	

		

			

				
					
monaco-editor浏览器中的网页代码编辑器在项目中集成

				
			

			

				

					zhang_hai_cheng的博客
				

				

					06-15
					
					3866
					
				

			

		

		

			
				
我们已经习惯了使用编辑器来编写代码，作为一名前端开发人员，有时候难免会遇到需要在浏览器中书写代码的场景。无论是用户需要还是我们自己为了开发便利，这都将是有益的。在网页中编辑很容易，但是能不能让我们像在本地编辑器中那样编写代码，提供丰富的功能呢？目前有很多个开源项目针对此问题实现了各自的一套解决方案。在此就以monaco-editor集成到vue项目中为例，为大家解决此类问题...

			
		

	





	

		

			

				
					
monaco-editor新增自定义代码补全规则

				
			

			

				

					川流不息
				

				

					07-16
					
					1万+
					
				

			

		

		

			
				
在monaco自带的javascript代码补全基础上添加自定义代码补全规则


import * as monaco from 'monaco-editor'
import vCompletion from './libs/custom-completion'
import sqlBuilder from './libs/sqlBuilder'


// 方法一
monaco.languages.registerCompletionItemProvider('javascript', {
	provid.

			
		

	



		

			
		



	

		

			

				
					
Monaco-Editor 多人协作 编辑器

				
			

			

				

					PHP代码的博客
				

				

					08-08
					
					2727
					
				

			

		

		

			
				
monaco-editor是微软开源的一款web端文本编辑器，也就是vscode内置的编辑器，扩展性很强，原生暴露了很多用于代码提示、高亮显示等API

			
		

	





	

		

			

				
					
Vue 引入代码代码编辑器monaco-editor定义语法提示

				
			

			

				

					gh313287387的博客
				

				

					05-15
					
					381
					
				

			

		

		

			
				
Vue 引入代码代码编辑器monaco-editor定义语法提示

			
		

	





	

		

			

				
					
使用monaco-editor实现一个带语法高亮和代码提示的在线编辑器

				
			

			

				

					weixin_44438275的博客
				

				

					07-24
					
					1万+
					
				

			

		

		

			
				
这是我进入公司遇到的第一个难题，项目里需要实现一个带语法高亮和代码提示在线页面编辑器的效果，就是那种左边代码右边界面的编辑器，页面编辑器作为一个以前我从来没有接触过的领域，这个需求对我来说是一个巨大的挑战，首先得确定使用哪个在线编辑器插件来实现这个功能，我在github,各种技术论坛找了一圈市面上口碑较好的编辑器大概有Monaco-editor，codemirror编辑器，AceEditor等等，我最终选择的是Monaco-editor编辑器原因就是他真的比其他的好用。先上最终实现的效果图：
界面主要分为两

			
		

	





	

		

			

				
					
react-app框架——使用monaco editor实现online编辑html代码编辑器

					
热门推荐

				
			

			

				

					编程知识分享，主打前端
				

				

					01-18
					
					2万+
					
				

			

		

		

			
				
大家好，我是yma16，本文分享关于 react-app框架——使用monaco editor实现online编辑html代码编辑器。monaco editor 编辑器Monaco Editor是一款功能强大的Web编辑器，由微软开发并使用在多个项目中。它是基于VS Code编辑器的核心组件，具有类似的功能和用户体验。轻量级：Monaco Editor具有出色的性能，可以快速加载和渲染大型文件。可定制性：用户可以通过添加自定义插件和主题来扩展和个性化编辑器。

			
		

	





	

		

			

				
					
vue2.x 使用monaco-editor 组件 详细教程

				
			

			

				

					apgk的博客
				

				

					07-29
					
					947
					
				

			

		

		

			
				
vue2.x monaco-editor 详细使用教程

			
		

	





	

		

			

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

				
			

			

				

					03-27
				

			

		

		

			
				
 - 自定义Monaco Editor的配置，例如禁用不必要的语言服务以减少内存消耗。  - 通过编写自定义的Monaco Worker来处理大规模的数据。  - 结合其他库如Redux或MobX进行状态管理，提高应用的可维护性。  总的来说，...

			
		

	





	

		

			

				
					
monaco-editor实现的sql编辑器

				
			

			

				

					02-22
				

			

		

		

			
				
在本项目中，我们利用Monaco-Editor构建了一个专门针对SQL语言的编辑器，旨在提供高效且便捷的SQL编写环境。  首先，我们要了解SQL编辑器的基础功能。这个SQL编辑器具备了关键词提示功能，这意味着当用户在输入SQL...

			
		

	





	

		

			

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

				
			

			

				

					04-21
				

			

		

		

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

			
		

	





	

		

			

				
					
Monaco Editor-crx插件

				
			

			

				

					04-02
				

			

		

		

			
				
语言:English (United States) 使用Monaco编辑器编辑纯文本内容。 提供Monaco编辑器作为覆盖的实现，可用于编辑页面上的可编辑节点。 使用右键单击->使用Monaco编辑器进行编辑或使用[CMD / CTRL] +左键单击可编辑...

			
		

	





	

		

			

				
					
【JavaScript源代码】vue 使用monaco实现代码高亮.docx

				
			

			

				

					12-29
				

			

		

		

			
				
Monaco Editor是一个由Microsoft开发的开源代码编辑器，被广泛应用在VS Code等编辑器中，提供了丰富的代码高亮、语法提示、多语言支持以及代码比较等功能。在Vue中集成Monaco，我们可以满足上述的需求，如代码高亮、...

			
		

	





	

		

			

				
					
ASP.NET Core Web API 使用Autofac框架

				
			

			

				

					鲤籽鲲的博客
				

				

					08-08
					
					492
					
				

			

		

		

			
				
ASP.NET Core Web API 使用Autofac框架

			
		

	





	

		

			

				
					
略记一次抓取内容后解密及登录的经历

				
			

			

				

					深蓝浅蓝的天
				

				

					08-09
					
					1025
					
				

			

		

		

			
				
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，

			
		

	





	

		

			

				
					
前端JS总结（中）

					
最新发布

				
			

			

				

					m0_54066656的博客
				

				

					08-12
					
					608
					
				

			

		

		

			
				
前端JS之内置对象总结，这很重要！！！

			
		

	





	

		

			

				
					
05_ Electron 自定义菜单、主进程与渲染进程通信

				
			

			

				

					所学所思
				

				

					08-09
					
					618
					
				

			

		

		

			
				
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。

			
		

	





	

		

			

				
					
react 中使用monaco-editor

				
			

			

				

					07-03
				

			

		

		

			
				
在React中使用Monaco Editor，首先你需要安装`@react-monaco-editor/monaco-editor`库，这是一个专门为React设计的Monaco Editor组件封装。以下是使用Monaco Editor的基本步骤：

1. **安装依赖**:
   ```bash
   npm install @react-monaco-editor/monaco-editor
   ```

2. **导入并使用组件**:
   在你的React组件中，导入`MonacoEditor`组件：
   ```jsx
   import { MonacoEditor, useMonaco } from '@react-monaco-editor/monaco-editor';
   ```

3. **创建编辑器实例**:
   使用`useMonaco`钩子获取Monaco环境，并在组件渲染时设置代码和配置：
   ```jsx
   const { editor, languages, addCodeEditorContribution } = useMonaco();

   useEffect(() => {
     editor.setModel({
       value: '你的初始代码',
       language: 'javascript', // 根据需要选择语言
     });
   }, []);

   return (
     <MonacoEditor
       height="400px"
       width="800px"
       language="typescript" // 这里设置你要显示的语言
       model={editor.getModel()}
       onChange={(newValue) => setCode(newValue)} // 更新代码事件处理
     />
   );
   ```

4. **添加功能或扩展**:
   如果你想使用自定义的Monaco贡献（比如语法高亮、代码提示等），可以在`useEffect`回调中调用`addCodeEditorContribution`方法加载它们。

5. **样式定制**:
   可以根据需要对组件的样式进行调整，例如更改高度、宽度、边框等。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
会说法语的猪

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值