Home > OS >  Set Monaco Editor in React to read-only
Set Monaco Editor in React to read-only

Time:01-27

Having the following code snippet:

import React from "react";

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

function App() {
  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// some comment"
    />
  );
}

export default App;

and sandbox

Is it possible to make it read-only? I've found some examples but they aren't working for this type of editor, is it possible to set read-only to true or some other method for the above code?

CodePudding user response:

The options prop is of type IStandaloneEditorConstructionOptions. There you have readOnly and domReadOnly flags, cf. https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html#readOnly

options={{domReadOnly: true}} appears to make the editor read-only, whereas options={{readOnly: true}} furthermore adds a tooltip.

  •  Tags:  
  • Related