如何在React js中删除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 ...
`

Answer 1

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

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

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

这是直接使用摩纳哥。对于@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。

Answer 2

如果您使用的是react版本@monaco-editor/react

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