CodeMirror【javescript】作为Antd表单项使用案例

以下案例是react+antd 项目中，codemirror作为自定义表单项使用，输入js, 支持全屏

npm i react-codemirror2 --save 暂使用^7.2.1版本

npm i codemirror --save 暂使用^5.65.11版本

npm i react-full-screen --save 暂使用^1.1.1版本

第一步: 新建CodeMirror/index.js公共文件

import React, { useRef, useState, useEffect } from 'react';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/theme/monokai.css';
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
import { FullScreen, useFullScreenHandle } from 'react-full-screen';

export default ({ value, onChange, readOnly}) => {
    const [defaultValue] = useState(value);
    const [full, setFull] = useState(false);
    const codeRef = useRef();
    const handle = useFullScreenHandle();
    
    useEffect(() => {
        onChange(defaultValue);
        // 初始化value之后，需要手动刷新编辑器否则行号内容重叠
        codeRef?.current?.editor?.refresh();
    }, []);
    
    return (
        <FullScreen handle={handle} onChange={setFull}>
            <span
                style={{
                    position: 'absolute',
                    right: 20,
                    top: 10,
                    color: '#fff',
                    zIndex: 9,
                    fontSize: 20,
                    cursor: 'pointer'
                }}
            >
                {
                    full ? (
                        <FullscreenExitOutlined
                            onClick={() => {
                                setFull(false);
                                handle.exit();
                            }}
                        />
                    ) : (
                        <FullscreenOutlined
                            onClick={() => {
                                setFull(true);
                                handle.enter();
                            }}
                        />
                    )
                }
           </span>
           <div style={full? {position: 'fixed', width: '100%', height: '100%'} : {}}>
               <CodeMirror
                   ref={codeRef}
                   value={defaultValue} // 不接受props value 否则会出现广播重置最后问题
                   options={{
                       tabSize: 2,
                       lineNumbers: true,
                       height: '100%',
                       mode: {
                           name: 'javascript',
                           json: true
                       },
                       theme: 'monokai',
                       autofocus: true,
                       foldGutter: true,
                       lineWrapping: true,
                       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
                       readOnly
                   }}
                   onChange={(_, __, val) => {
                       onChange(val);
                   }}
               />
           </div>
         </FullScreen>
    );
}

第二步： 使用的index.js中 直接可FormItem包裹使用

    <Form.Item name="aa">
        <VodeMirror />
    </Form.Item>