标签: monaco-editor

如何在摩纳哥编辑器的第一行代码和顶部边框之间添加填充？

我有这个：

但我需要这样的东西：

我正在使用 loader.js 创建摩纳哥编辑器，但在控制台中出现两次错误“每个脚本文件只能有一个匿名定义调用”。

<script src="/monaco-editor/min/vs/loader.js"></script>

创建编辑器的代码

require.config({ paths: { 'vs': '/monaco-editor/min/vs' }});
 require(['vs/editor/editor.main'], function() {                
    monacoEditor= monaco.editor.create(document.getElementById('coding-editor'), {
        value: [
        'function x() {',
        '\tconsole.log("Hello world!");',
        '}'
    ].join('\n'),
    language: 'javascript'
    });
 });

我尝试搜索该问题并找到以下相关答案：

您正在加载的某些代码正在使用匿名模块 ID 调用定义。你可以：

通过 AMD 加载器加载该代码（即手动需要它），以便 AMD 加载器创建标签<script>。

在 AMD 加载程序之前加载该代码（即定义对该代码段不可用）

在该脚本的评估期间取消设置定义（即，如果您使用标签加载它<script>，则在之前取消设置定义并在之后恢复它）

尝试取消设置define.jquery，据我所知jquery可能会在定义函数上检查它

这个页面已经有很多 jquery 了，我之所以理解这一点是因为 jQuery。请帮助一些人通过例子让我理解。谢谢

我可以看到如何addExtraLib在摩纳哥使用添加环境声明文件.目前尚不清楚如何将此函数与外部声明文件一起使用,以便编辑器中的Typescript代码可以执行以下操作:

import * as External from "external" 

External.foo();

在摩纳哥的设置方面,这似乎不起作用:

// compiler options
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true,
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
    noLib: true,
    typeRoots: ["node_modules/@types"]
});

// extra libraries
monaco.languages.typescript.typescriptDefaults.addExtraLib(
    'export declare function foo():string;', 'node_modules/@types/external/index.d.ts');

monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: false,
    noSyntaxValidation: false
})

在我的代码中，我创建了一个编辑器，如下所示：

this.monacoEditor = monaco.editor
  .create(
    document.getElementById('ide'), {
      model: null,
      readOnly: true,
      contextmenu: false,
    }
  );

所以现在该编辑器是只读的。我如何更改this.monacoEditor为可写/可编辑？

是否可以在摩纳哥编辑器中获得拆分窗格？类似于 VSCode 中所做的或摩纳哥本身提供的 Diff Editor 中使用的内容。

我一直在寻找一个讨论是否有可能模仿html标签textarea 在整个互联网上使用Monaco Editor的字段时调整大小,但我找不到回答我的问题.

我在React应用程序中使用monaco-editor npm包.您是否知道这是否易于实施？

先感谢您!

解决方案
使用纯css我选择了目标html元素并添加了以下属性:

__CODE__

我的理解是,Monaco针对编辑进行了优化,并且一次显示一个文件,使用固定大小的编辑器,它有自己的滚动条.

相反,我试图构建一个页面,其中多个文件的差异在彼此之下

• 允许显示/隐藏每个文件,最多约100个文件
• 隐藏未更改的文件部分(如果需要,允许将其显示为上下文)
• 每个文件没有一个滚动条,但整个页面只有一个滚动条
• 这些文件通常只能查看,但一次只能支持一个文件的编辑

我意识到这与摩纳哥的构建完全不同,但最终看起来似乎同样的视口和虚拟渲染技巧也适用,所以也许它在某种程度上可行？

我尝试为每个文件创建一个Monaco实例,但是在30个实例中开始变得非常缓慢.

一个非常丑陋的解决方法可能是拥有一个Monaco实例,连接所有文件,然后使用ViewZones,自定义行号提供程序和代码折叠提供程序来实现多个文件的印象.这听起来有点疯狂,还是真的有效？

还有其他建议吗？为什么IStandaloneDiffEditor 在名称中是独立的？这是否意味着还有另一种方法来创建更高效​​的差异编辑器？

有没有办法获取 Monaco 的可用命令/操作及其 ID 的列表，例如editor.action.formatDocument？

文档中似乎没有任何内容，我正在努力在 VS Code 存储库中查找注册的操作和命令。命令面板显示了其中的大部分，但如果您想使用 手动调用它们，则不会显示它们的 ID executeCommand。

在摩纳哥编辑器实例中，您可以调用addAction或addCommand

两者都提供了根据关键事件执行功能的能力

在线游乐场提供了如何添加命令或如何向编辑器实例添加操作的示例。

动作示例

editor.addAction({
    id: 'my-unique-id',
    label: 'My Label!!!',
    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
    run: function() { alert('action called') }
});

命令示例

editor.addCommand(
  monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
  function() { alert('called command') }
)

该文档描述了类型定义、属性和方法。

然而，它缺乏提供何时使用它们、它们在编辑器中出现的位置以及它们提供什么的上下文。

动作和命令有什么区别？

我正在使用带有 React 的 Monaco 编辑器。运行良好。但我想删除其中的小地图和滚动条。我怎样才能删除它们？我想禁用其中的编辑。我怎样才能实现这些功能？请检查图片以供参考 -

代码：

import Editor from "@monaco-editor/react";


export default function TwoSum() {

    return (
        <div>

            {/* Coding Page Content */}
            <div className="lg:flex h-full lg:w-12/12 lg:mx-2 mt-12 lg:py-4">
                {/* Coding Main Content Start */}
                <div className="lg:w-6/12 lg:pr-6 fixed overflow-scroll h-full pb-40">
                   // social 


                </div>
                {/* Coding Main Content End */}

                {/* Coding Right Sidebar Start */}
                <div className="lg:w-6/12 lg:pl-4 h-full px-2 mt-2 lg:mt-0 lg:px-0 absolute right-0">
                    
                    <Editor
                        height="80vh"
                        defaultLanguage="javascript"
                        defaultValue= {code}
                        className=" overflow-hidden"
                        readOnly = {true}
                        // …