如何在React中移除Monaco编辑器中的小地图和滚动条，以及如何禁用Monaco编辑器中的编写功能？

Question

我正在使用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}
                        // minimap={enabled = false}
                        // scrollbar={vertical = "hidden"}
                        
                    />

                    
                </div>
                {/* Coding Rightsidebar End */}
            </div>

        </div>
    )
}


const code = 
`Here is my code ...
`

- Ankit Kumar

---

这个回答解决了你的问题吗？monaco-editor：隐藏概览标尺 - Kunal Tanwar

仍然遇到问题。 - Ankit Kumar

Answer 1

当您创建编辑器时，可以指定许多选项来控制其行为和显示方式：

        const options: Monaco.IStandaloneEditorConstructionOptions = {
            readOnly: false,
            minimap: { enabled: false },
            ...
        };

        this.editor = Monaco.create(this.hostRef.current, options);

这是直接使用Monaco。对于@monaco-editor/react，你可以将选项指定为属性：

这是直接使用Monaco。对于@monaco-editor/react，您可以将选项指定为属性：

        const options: Monaco.IStandaloneEditorConstructionOptions = {
            readOnly: false,
            minimap: { enabled: false },
            ...
        };

        <Editor
            height="80vh"
            defaultLanguage="javascript"
            defaultValue= {code}
            className=" overflow-hidden"
            options = {options}
        />

另见：https://www.npmjs.com/package/@monaco-editor/react#editor。

- Mike Lischke

Answer 2

如果你正在使用 react 版本的 @monaco-editor/react

 <MonacoEditor
      // ...
      options={{
            minimap: {
              enabled: false,
            },
      }}
/>

- Stephani Bishop