1 篇博文 含有标签「monaco-editor」

import React, { useState, useCallback, useRef } from "react";
import MonacoEditor from "react-monaco-editor";
import * as monaco from "monaco-editor";

const Demo = () => {
  const [value, setValue] = useState("");

  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(); // 编辑器实例
  const monacoRef = useRef<typeof monaco>(); // monaco 实例
  
  // 获取编辑器实例
  const editorDidMountHandle = useCallback(
    (editor: monaco.editor.IStandaloneCodeEditor, monacoIns: typeof monaco) => {
      editorRef.current = editor;
      monacoRef.current = monacoIns;
    },[]);

  return (
    <MonacoEditor
      language="javascript"
      height="100%"
      theme="vs"
      value={value}
      onChange={setValue}
      options={{
        roundedSelection: false,
        cursorStyle: "line",
        wordWrap: "on",
      }}
      editorDidMount={editorDidMountHandle}
    />
  );
};