时间戳

首页 > 解决方案 > 如何在 React 功能组件中使用 Monaco Editor？

javascript - 如何在 React 功能组件中使用 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'
});

标签： javascriptreactjsmonaco-editor

解决方案

我在这里看到两个选项：

  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>
  );
  1. 使用 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>
  );

然后，您不需要手动创建编辑器的第二部分。

推荐阅读