Monaco Editor --Web编辑器 自定义主题、代码提示等

最新推荐文章于 2024-07-17 17:17:48 发布
最新推荐文章于 2024-07-17 17:17:48 发布
阅读量4.2k 收藏 6
点赞数
分类专栏： js 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42160499/article/details/109814702
版权

官网： Monaco Editor

JS配置信息：

//相关的包配置需要下载到对应目录
require.config({ paths: { 'vs': './vs' }});
    require(['vs/editor/editor.main'], function() {
        monaco.editor.defineTheme('BlackTheme', {
            base: 'vs-dark',
            inherit: true,
            rules: [{ background: '#3e414a' }],
            colors: {
                // 相关颜色属性配置
                // 'editor.foreground': '#000000',
                'editor.background': '#3e414a',     //背景色
                // 'editorCursor.foreground': '#8B0000',
                // 'editor.lineHighlightBackground': '#0000FF20',
                // 'editorLineNumber.foreground': '#008800',
                // 'editor.selectionBackground': '#88000030',
                // 'editor.inactiveSelectionBackground': '#88000015'
            }
        });
        //设置自定义主题
        monaco.editor.setTheme('BlackTheme');
        
        //创建编辑器
        editor = monaco.editor.create(document.getElementById('container'), {
            value: '',
            language: 'python',
            theme:'BlackTheme',
            automaticLayout: true,
            fontSize : '20px',
        });
        
        // 创建代码提醒
        monaco.languages.registerCompletionItemProvider('python', {
            provideCompletionItems: function(model, position) {
            // find out if we are completing a property in the 'dependencies' object.
                var textUntilPosition = model.getValueInRange({
                    startLineNumber: 1, 
                    startColumn: 1, 
                    endLineNumber: position.lineNumber, 
                    endColumn: position.column
                    });
                var suggestions = [];
                var word = model.getWordUntilPosition(position);
                var range = {
                    startLineNumber: position.lineNumber,
                    endLineNumber: position.lineNumber,
                    startColumn: word.startColumn,
                    endColumn: word.endColumn
                };

                if(textUntilPosition.charAt(textUntilPosition.length-2)=='.'){
                    suggestions = createTips();
                }
                return {suggestions: suggestions};
            }
        });
    });

    // 代码提示方法(返回一个数组)
    function createTips() {
        return [
		{
			label: 'SetValue', //显示的提示名称
			insertText: 'SetValue("text")' //选择后粘贴到编辑器中的文字
		},
        ]
    }

HTML前端代码

<body overflow:hidden style="padding:0;margin:0">
    <div id="container" style="width:100%;height:100vh;border:0px"></div>
</body>
风干牛肉巴旦木
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue中实现Monaco Editor自定义提示功能
10-16
最近小编接到一个项目，需要在浏览器的ide中支持自定义提示功能，接下来通过本文给大家介绍在vue中实现Monaco Editor自定义提示功能,需要的朋友可以参考下
在线 Javascript 代码编辑器，有代码提示功能
fth1002853070的博客
07-28 198
分享一个在线代码编辑器，有代码提示功能。
vue3 使用 monaco-editor 自定义代码补全。
yyXieDaiMa的博客
04-17 6099
*** 注册：自定义语法补全* @param language 语言类型* @param constValues 常量提示*/// 获取当前行数// 获取当前列数// 获取当前输入行的所有内容// 通过下标来获取当前光标后一个内容，即为刚输入的内容label: e,detail: '常量配置',}))//拦截到用户输入$，开始设置提示内容，同else中代码一致，自行拓展// 直接提示，以下为sql语句关键词提示label: e, // 显示的提示内容。
Monaco Editor系列（七）代码信息指示器CodeLens、使用API触发键盘事件、自动完成配置
weixin_45855469的博客
06-05 1146
本篇文章主要介绍了三个功能 CodeLens 代码信息提示器的配置和自动补全配置很类似，都是隶属于 languages 命名空间，从函数名上看，都是通过注册 Provider 的方式，增加配置，里面传参也很类似，第一个参数都是语言，第二个是配置项 CodeLens 和 Markers 很类似，都是提供代码提示的，帮助开发者更好的理解代码，但是 Markers 是鼠标浮动到代码上才会出现，并且可以显示的内容比较多，CodeLens 直接显示在代码里面，占据独立一行，但是不占用行号，复制时不会被复制到剪切板中。
Monaco Editor安装，vue3中使用，自定义高亮，自定义提示，附完整代码
qq_29184685的博客
02-17 7672
Monaco Editor安装，vue3中使用，自定高亮，自定义提示
monaco-editor新一代前端UI编辑器
qq_40650378的博客
08-21 3051
业务场景：编辑自动化脚本，开放自动编辑，需要采用一款编辑器，之前有在其他项目看到，发现这款适用于前端的编辑器真心不错，良心推荐！ 这是官方地址https://microsoft.github.io/monaco-editor/ 可以体验下强大之处（基本包涵了大部分的idea和vscode的功能） 废话不多说，直接上手vue项目对接，步骤如下： 1安装 npm install monaco-editor-vue npm install monaco-editor-webpac...
教大家怎么看monaco-editor的官方文档
04-17 2787
点进去，略过Enumerations（枚举）、Classes（类）、Interfaces（接口）、Type aliases（类型别名）、Events（事件）、Variables（变量）拉到下面，找到Function（功能）部分，主要是看create()，这个方法会在创建编辑器的时候初始化部分功能，这些功能在options里配置。点开具体参数，会有它的枚举值。如果不知道这个参数具体是干什么的，可以点开源代码Defined定义链接去看，里面注释的参数用途还是比较清楚的。
在线代码编辑器：Monaco Editor
qq_30436011的博客
09-28 9984
Monaco Editor不得的不说是一个非常强大的在线代码编辑器，可以为自己的项目提供云端代码编辑器的基础技术支持，可以在其基础上扩展很多强大的功能，当然上手不一定简单，需要根据自己的需求确定开发方案，有需求的小伙伴可以去研究一下！
monaco-editor实现的sql编辑器
02-22
Monaco-Editor是一款由Microsoft开发的强大代码编辑器，它被广泛应用在各种在线代码编辑场景中，比如VS Code的Web版本。在本项目中，我们利用Monaco-Editor构建了一个专门针对SQL语言的编辑器，旨在提供高效且便捷的...
react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴
03-27
React-Monaco-Editor是一款基于Microsoft的Monaco Editor构建的React组件，它允许开发者在React应用中集成一个功能强大的代码编辑器，尤其适用于Web开发中的代码编辑、预览和调试场景。Monaco Editor是VS Code的核心...
monaco-themes:Web浏览器中与monaco-editor一起使用和生成的主题
04-28
摩纳哥主题 参见扩展演示 在浏览中与一起使用的主题定义列表。 观看最少的演示 用法 npm install monaco-themes 原料药 使用[removed] < script type =" text/javascript " src =" https://unpkg.com/monaco-themes/dist/monaco-themes.js " > </ script > < script type =" text/javascript " > var tmThemeString = /* read using FileReader */ var themeData = MonacoThemes . parseTmTheme ( tmThemeString ) ; monaco . editor . defineTheme ( 'mytheme' ,
采用MonacoEditor和React打造自己的Web IDE
11-03
在本文中，我们将探讨如何利用MonacoEditor、React和相关技术构建一个自定义的Web IDE，以便用户可以方便地在不同设备上查看和编辑代码。MonacoEditor是Microsoft开发的一个强大的代码编辑器组件，常用于在线代码...
Monaco Editor 代码编辑器 v0.14.2
10-10
Monaco Editor是一款由微软开发并开源的代码编辑器，它基于知名的Visual Studio Code（VS Code）构建，专门设计用于在Web浏览器环境中运行。这个编辑器的出现，为开发者提供了在云端编写和编辑代码的强大工具，使得...
代码编辑器之monaco editor
qq_41383241的博客
12-05 1万+
介绍vue2、vue3中使用monaco编辑器，但是vue2存在未解决的问题。博主建议使用vue3搭配monaco编辑器，vue2建议搭配ace编辑器。如果大家vue2成功使用monaco也可告诉我，感谢撒花~~ 其中部分参考其他博主
react-monaco-editor自定义主题
学习笔记
12-01 1352
import MonacoEditor from 'react-monaco-editor'; /** * 编辑器钩子editorWillMount * @param {*}} monaco */ editorWillMount(monaco) { monaco.editor.defineTheme('themeGray', { base: 'vs', inherit: false, rules: [], colors: { 'editor.backg
VS Code 编辑器： Monaco Editor 介绍
顺其自然~专栏
04-18 9990
Any application that can be written inJavaScript, will eventually be written inJavaScript. --Atwood's Law 任何可以用JavaScript来写的应用，最终都将用JavaScript来写。--阿特伍德定律 Monaco Editor 是一个浏览器端的代码编辑器库，同时它也是 VS Code 所使用的编辑器。Monaco Editor 可以看作是一个编辑器控件，只提供了基础的编辑器与语言相...
monaco editor各种功能实现总结
热门推荐
gao_grace的博客
03-29 7万+
添加删除断点
Monaco Editor教程（六）：切换主题，及自定义主题功能的实现
知无涯
09-30 4163
monaco editor 切换主题，设置自定义主题 配置参数，api详解
【整体介绍】HTML和JS编写多用户VR应用程序的框架
最新发布
Welcome Friends~
07-17 397
简称NAF，底层基于Mozilla的AFrame框架，用HTML和JS编写多用户VR应用程序的框架。
monaco-editor自定义提示
06-28
### 回答1： monaco-editor是一个基于web的代码编辑器，它支持自定义提示功能。用户可以通过编写插件或者配置文件来实现自定义提示。 具体来说，用户可以通过以下步骤来实现自定义提示： 1. 编写一个插件或者配置文件，定义需要提示的关键字、变量、函数等信息。 2. 将插件或者配置文件加载到monaco-editor中。 3. 在编辑器中输入代码时，当输入到定义的关键字、变量、函数等时，会自动弹出提示框，显示相关信息。 需要注意的是，自定义提示功能需要一定的编程经验和monaco-editor的使用经验。如果您不熟悉这些知识，建议先学习相关的教程和文档。 ### 回答2： Monaco Editor 是一个轻量级的代码编辑器，由微软开发，可用于 Web 应用程序开发中。它可以很好地支持多种编程语言，如 JavaScript、TypeScript、HTML、CSS、Java、Python、PHP、C# 等。在使用中，Monaco Editor 提供了一些自动提示功能，可以帮助开发人员更快地编写代码。在这个过程中，我们也可以为 Monaco Editor 添加自定义提示。 为 Monaco Editor 自定义提示，我们需要实现两个步骤。首先，我们需要定义一个词汇表对象，它将包含我们想要显示的提示列表。这个对象将存储我们在输入时要显示的类别和相应的提示条目。其次，我们需要创建词法分析器来解析并检查用户输入的代码。 下面是一组步骤，可以帮助我们在 Monaco Editor 中添加自定义提示： 第一步：定义提示 我们可以定义一个数组来存储提示数据，在数组中，我们可以定义需要显示的类别和类别下的提示列表。例如： ```javascript var myAutoCompletionProvider = { getId: function() { return 'myAutocomplete'; // 唯一标识 }, provideCompletionItems: function(model, position) { var result = []; result.push({ label: 'foo', insertText: 'foo', kind: monaco.languages.CompletionItemKind.Function,// 类型是 Function documentation: 'This is a function.'// 注释 }); result.push({ label: 'bar', insertText: 'bar', kind: monaco.languages.CompletionItemKind.Variable,// 类型是 Variable documentation: 'This is a variable.'// 注释 }); return { suggestions: result }; } }; ``` 在这个例子中，我们定义了一个名为 "myAutoCompletionProvider" 的对象，其中包含一个定义某些类别和类别下的提示条目的 "provideCompletionItems" 函数。通过 "provideCompletionItems" 函数，Monaco Editor 可以根据当前的文本提示用户可以输入的单词，例如，当用户输入“f”，使用该函数时，Monaco Editor 将显示 "foo"。 第二步：添加到 Monaco Editor 中 为了使用自定义提示，我们需要将 "myAutoCompletionProvider" 对象添加到 Monaco Editor 的 LanguageConfiguration 中。要将其添加到 Monaco Editor 中，我们应该： ```javascript monaco.languages.registerCompletionItemProvider('javascript', myAutoCompletionProvider); ``` 在这个例子中，我们将 "myAutoCompletionProvider" 添加到了 "javascript" 语言中。这意味着，在 JavaScript 文件中使用 Monaco Editor 时，将显示 "myAutoCompletionProvider" 中定义的提示。如果我们想在其他语言中使用这些提示，我们可以更改 'javascript' 为其他语言的名称。 第三步：运行并测试我们的自定义提示 现在，当我们在 Monaco Editor 中编写 JavaScript 代码时，Monaco Editor 将显示 "myAutoCompletionProvider" 对象中定义的提示。这些提示将有助于我们更快地编写代码。例如，当我们在输入代码时输入 "f"，Monaco Editor 将会自动显示 "foo" 和 "bar"。 总结 Monaco Editor 提供了自定义提示的能力，通过提供我们自己的词汇表对象和创建词法分析器，我们可以添加我们自己的提示。这将大大提高代码编写和修改的效率。 ### 回答3： Monaco Editor是一款优秀的代码编辑器，它的智能提示功能非常强大，可以提供代码自动补全、参数提示、错误提示等多种功能。但是有时候我们需要自定义自己的提示信息，例如添加一些特定的代码片段或者自定义函数等，这时候就需要使用Monaco Editor的自定义提示功能了。 Monaco Editor的自定义提示功能使用的是语言服务器协议（Language Server Protocol，LSP），通过编写LSP服务器来提供自定义的提示信息。LSP服务器是一种基于标准协议的进程，它可以与任何支持LSP的编辑器进行通信，提供代码分析、自动补全、错误检测等功能。 为了实现自定义提示功能，我们需要编写一个LSP服务器，并将其与Monaco Editor进行集成。具体步骤如下： 1. 编写LSP服务器：我们可以使用任何一种程序语言编写LSP服务器，例如Java、Python、C++等。编写LSP服务器的关键是要遵守LSP协议，实现协议中定义的方法和接口，并提供自定义的提示信息。有许多现成的LSP库可以使用，例如Microsoft提供的LSP SDK，也可以使用一些第三方库，例如Eclipse JDT提供的Java LSP。 2. 配置Monaco Editor：在配置Monaco Editor之前，我们需要先将LSP服务器部署在一个可访问的地址上。然后，在Monaco Editor中添加一个LSP客户端，用于与LSP服务器进行通信。可以使用Monaco Editor提供的monaco-languages扩展库来添加LSP客户端，具体方法可以参考官方文档。 3. 提供自定义提示信息：一旦LSP服务器和Monaco Editor集成完成，我们就可以开始提供自定义的提示信息了。在LSP服务器中编写代码分析算法，为代码添加自定义的提示信息，例如添加特定的代码片段、自定义函数等。然后在Monaco Editor中使用这些提示信息，提供更好的代码智能提示功能。 总的来说，Monaco Editor的自定义提示功能非常强大，可以为代码编辑提供更多的便利和智能化。但是开发一个LSP服务器并不是一件简单的事情，需要掌握很多技术和知识。如果没有必要，建议使用Monaco Editor提供的默认提示功能，或者使用一些现成的LSP服务器，例如Java LSP或Python LSP。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风干牛肉巴旦木

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值