问题标签 [monaco-editor]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1069 浏览

angular - @materia-ui/ngx-monaco-editor - 无法获得与编辑器一起使用的自定义 json 架构

我无法弄清楚如何使用该@materia-ui/ngx-monaco-editor库加载自定义 json 模式并用于验证对 monaco 编辑器实例的输入

我一直在关注这里的指南https://levelup.gitconnected.com/autocomplete-json-with-angular-and-monaco-f1dcc01e36e1当然还有lib 的自述文件

我正在尝试MonacoEditorLoaderService根据他们的文档从库中使用它们并设置 jsonDefaults 的各种诊断选项,如下所示:

Ctrl+Space 只给了我以下$schema选项,并且没有我的架构定义的属性。

在此处输入图像描述

我显然有一些错误配置并误解了如何正确设置模式加载。

我的设置的 Stackblitz 在这里 - https://stackblitz.com/edit/materia-ngx-monaco-editor-example-y2tcrz?file=src/app/app.component.ts

有人可以指出这里的问题是什么,请问我做错了什么?

谢谢

0 投票
3 回答
1541 浏览

angular - ngx-monaco-editor - 容器更改时无法设置布局大小(使用选项卡面板)

我正在努力处理ngx-monaco-editorprimeng选项卡面板内部的一个实例,当切换到另一个选项卡时,它似乎失去了它的大小计算,更改绑定到编辑器的模型值,然后再次切换回初始选项卡。

https://stackblitz.com/edit/primeng9-tabs-monaco-editor

使用上面的 URL 进行复制的步骤:

  • 最初将选择“编辑器”选项卡
  • 选择“标签 2”
  • 单击“更改代码”按钮
  • 切换回“编辑器”选项卡,现在看到编辑器的大小缩小了

前:

在此处输入图像描述

后:

在此处输入图像描述

在 Dom 中检查,最初分配的样式仍然存在。

从我的示例应用程序的源代码中可以看到,我还尝试layout在选项卡更改事件中使用编辑器的方法来尝试根据容器强制重新计算大小,但这没有任何区别

有趣的是,如果我调整窗口大小,这似乎会触发编辑器组件再次正确调整大小。

0 投票
3 回答
22848 浏览

javascript - 获取摩纳哥编辑器的价值

微软最近开源了他们的 monaco 编辑器(类似于 ace/codemirror)。

https://github.com/Microsoft/monaco-editor

我已经在浏览器中启动并运行它,但仍然无法弄清楚如何获取编辑器的当前文本,就像我想保存它一样。

例子:

0 投票
1 回答
10556 浏览

asp.net-mvc - 在 Web 应用程序中使用 Monaco 编辑器

我们有一个 MVC Web 应用程序,其中 Powershell 用作脚本引擎。目前,文本区域元素用于脚本编辑,结果非常麻烦。当 Microsoft 发布Monaco Editor时,我们想知道是否可以将编辑器作为小部件嵌入到我们的应用程序中,以利用其语法检查和智能感知功能。查看他们的文档后,找不到太多相关信息。这是可能的还是微软目前不支持在第三方应用程序中使用?

0 投票
2 回答
4851 浏览

javascript - 浏览器中的 Microsoft Monaco Editor 获取行的值

我一直在使用基于浏览器的 Microsoft Monaco 编辑器版本,我在操场上找不到任何文档或任何示例来告诉您如何在编辑器中获取特定行的值。

例如:

第 2 行将是private m:number;.

您将如何获取该行甚至该行的一部分的值,然后使用代码更改它的值。我想将该操作放入键盘快捷键中。

0 投票
0 回答
1116 浏览

javascript - 如何在摩纳哥添加自动完成列表

我在电子应用程序中使用 Monaco Editor。我想添加自动完成列表而不是覆盖它。添加自动完成列表之前:

在此处输入图像描述

添加自动完成列表后,列表中只有添加的关键字。但也想要文档中的单词:

这张图片来自摩纳哥游乐场,但我也遇到了同样的行为

我正在使用以下代码:

0 投票
4 回答
2487 浏览

javascript - 带有 AngularJS 的 Electron 中的 Monaco 编辑器

我想在 Electron 中启动并运行 monaco 编辑器。我找到了摩纳哥的电子示例,但它们在我的应用程序中不起作用。

我得到的只是错误,例如:

如果 monaco 的 loader.js 不包含在脚本文件中,一切正常。

当我尝试包含“fs”模块时,该错误出现在文件开头的一个 AngularJS 服务中:

但如前所述:如果不包含 monaco loader.js 文件,这可以正常工作。

有什么建议我可以解决这个问题吗?我想在我的 Electron 应用程序中包含 monaco 编辑器,最好在我的 AngularJS 指令和/或服务中访问它。与 ACE 编辑器相比,会简化我的应用程序。

0 投票
1 回答
2873 浏览

javascript - 重置摩纳哥编辑器状态

我已经实现了 Monaco Editor ( https://github.com/Microsoft/monaco-editor ) 作为用户插入一些 JSON 的一种方式。

一旦用户单击“发布”按钮,我就会启用编辑器。问题是,编辑器在开关功能中启用。因此,一旦单击按钮一次,如果客户端再次单击相同的按钮,编辑器将喜欢在第一个创建的编辑器下方附加。有没有办法“重置”编辑器,所以它实际上不会附加,而是要么制作一个新的,要么使用已经创建的?

这是我当前的代码。

因此,我希望window.editor = monaco.editor.create(document.getElementById('codeEditor'), {})每次输入此开关案例时都使用已创建的相同(如果已创建)或制作一个新的,因此它不会附加到已创建的案例下方。

0 投票
3 回答
16687 浏览

javascript - 为 VSCode/Monaco Intellisence 添加 JavaScript 类型提示

有没有办法提示 VSCode/Monaco 的智能感知变量类型。

我有一些这样的代码

我看到 VSCode 知道这loc是一个URL

vscode 知道 loc

但它不知道是gl什么

vscode不知道gl

它也不知道什么ctx

vscode不知道ctx

这是有道理的,让函数根据其输入返回不同类型是一种不寻常的情况。

但它确实有类型数据WebGLRenderingContext

vscode 知道 webglrenderingcontext

它知道CanvasRenderingContext2D

vscode知道canvasrenderingcontext2d

有没有办法让我告诉 vscode/monaco 这gl是一个实例,WebGLRenderingContextctx是一个实例,CanvasRenderingContext2D而不必切换到打字稿?也许通过添加某种评论?

我需要在摩纳哥工作的解决方案至少在我的测试中显示所有相同的完成),因为这是针对 WebGL 教程站点,实际上不是针对 VSCode,但我希望解决方案是相同的。

0 投票
1 回答
478 浏览

javascript - 将 React 与不受控制的第三方组件一起使用

我想使用 React 创建一个类似于 JSFiddle 的 UI:

  • HTML、CSS 和 JS 的面板
  • 预览面板
  • 一个更新预览的“运行”按钮

我想为 HTML、CSS 和 JS 面板使用 Microsoft 的Monaco 编辑器来获得语法高亮和自动完成功能。

我已经抽象出一个通用的 MonacoEditor 组件。我的组件层次结构如下所示:

如果我在 Vanilla JS 中实现这个 UI,该run()方法将调用getValue()每个 Monaco 实例以从每个面板中提取全文并生成预览。

然而,这对于 React 来说变得很尴尬,因为该run()方法不能在子组件的实例上调用方法。

一种解决方法是让MonacoEditor道具onUpdate在每次击键时触发。Root当单击“运行”按钮时,该组件可以存储每个面板的临时内容。如果每个编辑器都是<textarea>. 但这对摩纳哥来说不是首发。在每次击键时序列化编辑器的文本会使其变得非常慢。

我能想到的唯一其他方法是将“getter setter”传递给MonacoEditor组件,例如:

但这感觉非常尴尬,并且与单向数据绑定的想法背道而驰。有没有更好、更惯用的方法?