reactjs - 如何使用 react-codemirror2 使用自定义 CodeMirror 模式

Question

使用react-codemirror2时如何使用自定义CodeMirror模式？导入后两者和都未定义，如下所示：CodeMirror.defineSimpleModeCodeMirror.defineMode

import {UnControlled as CodeMirror} from "react-codemirror2";
import 'codemirror/lib/codemirror.css';

上下文：在我的反应项目中，我想使用CodeMirror并定义我自己的输入语言，该语言与某些正则表达式匹配，然后突出显示它们以指示用户已正确输入它们。我还想要行号，没有换行，等宽字体，因此代码编辑器似乎接近我想要实现的目标。

Answer 1

您有两个选项可以使用 react-codemirror2 使用自定义模式。

1. 使用defineMode道具并传入模式及其功能：

import { UnControlled as CodeMirror } from "react-codemirror2";
import 'codemirror/lib/codemirror.css';

<CodeMirror
  options={{
    lineNumbers: true,
    defineMode: {
      name: 'yourMode',
      fn: yourModeFunction
    },
    ...

  }}
  ...
/>;

2. 在渲染控件之前单独导入 CodeMirror 并定义您的模式：

import { UnControlled as CodeMirrorControl } from "react-codemirror2";
import 'codemirror/lib/codemirror.css';
import CodeMirror from 'codemirror';

CodeMirror.defineMode('yourMode', yourModeFunction);

<CodeMirrorControl
  options={{
    lineNumbers: true,
    ...
    mode: 'yourMode',
  }}
  ...
/>;