标签: monaco-editor

如何使用 Webpack 和 React create-react-app 在 Monaco 中加载 npm 模块类型定义

我想在 React 应用程序中加载 Monaco 中的一些模块类型定义以用于教程目的。

实际上,我在经历了很多痛苦之后才设法让它发挥作用,但以一种非常黑客的方式。所以我不是问如何做,而是问如何正确地做。

我希望可以使用 Webpack 解决的部分是,现在我制作了一个 Node.js 脚本,该脚本获取.d.ts它可以在私有 npm 模块的构建文件夹中找到的所有文件,并将它们保存在一个大的 .json 文件中。

以这种格式

{ [filePath]: 'fileContentAsString' }
Run Code Online (Sandbox Code Playgroud)

然后在 React 中,我导入该 json 并调用addExtraLib每个 json。

{ [filePath]: 'fileContentAsString' }
Run Code Online (Sandbox Code Playgroud)

有没有办法使用一些 webpack 魔法来避免创建 json 文件?

typescript reactjs webpack monaco-editor create-react-app

3
推荐指数
1
解决办法
1542
查看次数

摩纳哥 registerSignatureHelpProvider() 导致错误:无法读取未定义的属性“签名”

我正在使用 Monaco 0.22.2 尝试提出函数参数的建议。我定义了一个简单的例子,如下所示:

monaco.languages.registerSignatureHelpProvider('myCustomLang', {
    signatureHelpTriggerCharacters: ['(', ','],
    provideSignatureHelp: (model, position, token) => {
        return {
            activeParameter: 0,
            activeSignautre: 0,
                signatures: [{
                    label:'string of_string(string $string, int $start)',
                    parameters: [
                        {
                            label: 'string $string',
                            documentation: 'The input string'
                        },
                        {
                            label: 'int $start',
                            documentation: "if $start is non-negative...",
                        }
                    ]
                }]
        };
    }
});
Run Code Online (Sandbox Code Playgroud)

但是,一旦我输入“(”或“,”来触发此代码,我就会收到错误:

Cannot read property 'signatures' of undefined
TypeError: Cannot read property 'signatures' of undefined
    at ParameterHintsModel.eval (parameterHintsModel.js:166)
    at Generator.next (<anonymous>)
    at fulfilled (parameterHintsModel.js:19)
    at eval (errors.js:24) …
Run Code Online (Sandbox Code Playgroud)

undefined signature monaco-editor

3
推荐指数
1
解决办法
669
查看次数

在Monaco编辑器中,如何从IEditor界面获取选定的文本

迷失在 API 的电报文档中。如何从 IEditor 界面获取选定的文本?selection返回的对象只有getSelection行号和列号。那么我是否需要在编辑器的文本中搜索该文本?

并且,与返回的所有其他选择相比,主要选择是什么getSelections

monaco-editor

3
推荐指数
1
解决办法
3348
查看次数

如何使用摩纳哥将自动完成添加到基于浏览器的编辑器

所以最近我想使用自定义语言创建一个基于浏览器的编辑monacoantlr。我遵循了这个很棒的教程https://tomassetti.me/writing-a-browser-based-editor-using-monaco-and-antlr/

Monaco 已经在按 ctrl + space 时给出了建议,但我想在monaco. 我怎样才能做到这一点?

antlr autocomplete editor typescript monaco-editor

3
推荐指数
1
解决办法
1万
查看次数

摩纳哥:如何添加内联自动完成/代码建议?

我找不到任何有关如何添加内联自动完成功能的示例,如下图所示?有人可以指导我如何在摩纳哥做到这一点吗?

在此输入图像描述

在此输入图像描述

javascript visual-studio-code monaco-editor

3
推荐指数
1
解决办法
3327
查看次数

如何在 Windows 窗体应用程序中使用 Monaco 编辑器?

我有一个 Windows 窗体应用程序(.net 框架),我想在其中使用 Monaco 编辑器。搜索互联网确实提供了很多帮助,而且 stackoverflow 也没有相同的问题。我不知道有多少使用 Monaco 的应用程序(不是由 Microsoft 制作的),但我知道的是:

请注意,这些是 roblox 秘籍,也是我能找到的唯一使用 Monaco 编辑器并用 C# 编写的应用程序。

既然这些应用程序能够使用 Monaco,那么一定有一种方法可以将它与 C# 一起使用,对吗?

.net c# winforms monaco-editor

3
推荐指数
1
解决办法
3576
查看次数

Monaco Editor 在使用 Webpack 的情况下不会加载代码图标

在使用 Webpack 的情况下尝试使用Monaco Editor时,不会加载代码图标。我使用了 monaco-editor-webpack-plugin 并按照说明进行操作,但目前我的测试页面中的 Monaco Editor 实例上看不到任何图标。

在此输入图像描述

我是否忘记加载代码了?

您可以通过以下方式重现此问题:https ://github.com/yoichiro/monaco-editor-test/tree/main

索引.html

<!doctype html>
<html lang="en">
<head>
  <style>
    .source-editor {
                width: 640px;
                height: 320px;
        }
  </style>
</head>
<body>
  <div class="source-editor"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

索引.ts

import * as monaco from 'monaco-editor';

window.addEventListener('load', () => {
        monaco.editor.create(document.querySelector('.source-editor'));
});
Run Code Online (Sandbox Code Playgroud)

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const MonacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'build'), …
Run Code Online (Sandbox Code Playgroud)

javascript webpack monaco-editor

3
推荐指数
1
解决办法
3365
查看次数

完成显示的自定义顺序 - 摩纳哥

我指的是 monaco的完成提供程序示例

我注意到完成是按以下顺序定义的:lodash, express, mkdirp但编辑器中的建议是按字母顺序列出的。

我想自定义这种行为。这可能吗?我看过这个pull request,但无法将其连接起来。

任何帮助表示赞赏!

monaco-editor

2
推荐指数
1
解决办法
451
查看次数

如何在摩纳哥编辑器中获得Markdown预览?

VSCode具有用于.md markdown文件的“打开预览”。如何获得相同的功能?包括在内吗?我浏览了游乐场示例和API,但是什么也没看到。谢谢。

monaco-editor

2
推荐指数
1
解决办法
981
查看次数

TextMate 语法和主题如何与 VSCode 配合使用?

VSCode 建立在 MonacoEditor 之上,MonacoEditor 不支持 Textmate 语法和主题。但不知何故 VSCode 使它成为可能。我很好奇 VSCode 是如何做到这一点的。

我问是因为我正在制作一个带有 TextMate 语法和主题支持的代码编辑器(基于 Monaco)。但我无法理解如何实现它。

尽管有一些软件包monaco-textmate可以使 TextMate 语法与 Monaco 一起使用,但语法突出显示仍然无法正常工作

visual-studio-code tmlanguage monaco-editor

2
推荐指数
1
解决办法
1290
查看次数