如何在 Monaco 編輯器中刪除小地圖、滾動條以及如何在 React js 中禁用在 Monaco 編輯器中寫入？

Question

我正在使用帶有反應的摩納哥編輯器。 它工作正常。 但我想刪除其中的小地圖和滾動條。 我怎樣才能刪除它們？ 我想禁用其中的編輯。 我怎樣才能實現這些功能？ 請查看圖片以供參考 -

代碼：

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 。