Question

如何在 React 功能组件中使用 Monaco Editor？

2021-10-28

2131

javascript reactjs monaco-editor

我的 React 项目中有一个功能组件。我已将 Monaco 编辑器依赖项包含为

import * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';

如何使用此处的 Editor 对象来实际渲染和测试 monaco-editor？

我有如下代码，

  return (
    <Flex>
      <Flex.Box auto>
        <Input.Textarea
          ref={ref}
          size="small"
          value={value}
          onChange={onChange}
          onKeyPress={(e) => { handleKeyDown(e, value); }}
          error={error}
          readOnly={readOnly}
        />
        <MonacoEnvironment.
      </Flex.Box>
      <Flex align="flex-start" w="21px">
        {icon}
      </Flex>
    </Flex>
  );

我正在查看 MonacoEnvironment 对象，但我不知道如何将其设置为编辑器。

我想在我的代码中模仿以下功能，

monaco.editor.create(document.getElementById('container'), {
  value: [
    'function x() {',
    '\tconsole.log("Hello world!");',
    '}'
  ].join('\n'),
  language: 'javascript'
});

Answer 1

我在这里看到两个选项：

将 HTML 元素添加到渲染树，该元素可以托管编辑器。您在第二个代码片段中有 document.getElementById 调用。这需要一个 id 为 container 的元素：

  return (
    <Flex>
      <Flex.Box auto>
        <Input.Textarea
          ref={ref}
          size="small"
          value={value}
          onChange={onChange}
          onKeyPress={(e) => { handleKeyDown(e, value); }}
          error={error}
          readOnly={readOnly}
        />
        <div id="container />
      </Flex.Box>
      <Flex align="flex-start" w="21px">
        {icon}
      </Flex>
    </Flex>
  );

使用 Monaco 编辑器 React 包装器（例如 react-monaco-editor ）并将其添加到渲染树：

  return (
    <Flex>
      <Flex.Box auto>
        <Input.Textarea
          ref={ref}
          size="small"
          value={value}
          onChange={onChange}
          onKeyPress={(e) => { handleKeyDown(e, value); }}
          error={error}
          readOnly={readOnly}
        />
        <MonacoEditor
          width="800"
          height="600"
          language="javascript"
          theme="vs-dark"
          value={code}
          options={options}
        />
      </Flex.Box>
      <Flex align="flex-start" w="21px">
        {icon}
      </Flex>
    </Flex>
  );

那么您不需要第二部分，即您手动创建编辑器的部分。