Codemirror -- 代码编辑器(react、umi)

        首先，如果您对Codemirror代码编辑器不太了解，建议使用monaco-editor 代码编辑器，相对来说monaco-edito的源码更容易阅读，配置和使用更加简单。

1. 效果图

2. 安装依赖

pnpm install [email protected] 

pnpm install [email protected]

pnpm install @types/[email protected]   // ts项目

3. 代码

import { useEffect, useRef } from 'react';

import 'codemirror/lib/codemirror.css';
import CodeMirror from 'react-codemirror';
//主题
import 'codemirror/theme/solarized.css';
import 'codemirror/theme/ttcn.css'; // material
// 折叠代码
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/indent-fold.js';

// 代码提示
import 'codemirror/addon/hint/anyword-hint.js'; // 简单提示，按需引入，spl可引入sql-hint.js
import 'codemirror/addon/hint/show-hint.css'; //
import 'codemirror/addon/hint/show-hint.js';

import 'codemirror/addon/comment/comment.js';
// 高亮
import 'codemirror/addon/selection/active-line.js';

// python语言
import 'codemirror/mode/python/python.js';

// 括号匹配
import 'codemirror/addon/edit/closebrackets.js';
import 'codemirror/addon/edit/matchbrackets.js';

import 'codemirror/addon/lint/lint.js';

import 'codemirror/addon/lint/javascript-lint.js';

export default (props: any) => {
  const { value, codeChange } = props;
  const inputRef = useRef(null);
  useEffect(() => {
    if (value) {
      const editor = inputRef?.current?.getCodeMirror();
      editor.setValue(value);
    }
  }, [value]);
  return (
    

       {
          codeChange?.(code);
        }}
      />
    
  );
};

4. 解决无法找到模块问题

方法1: 在根目录创建declaration.d.ts文件 ，添加以下代码

declare module 'react-codemirror';

方法2: 安装ts依赖(推荐)

pnpm install @types/[email protected]