在线编辑CodeMirror集成React

背景: 由于最近项目中有在配置组件时候需要展示命令行内容、修改要提交的命令行内容、以及部署日志展示的需求，所以用到了CodeMirror；

安装

npm install  --save @uiw/react-codemirror

引入

import CodeMirror from '@uiw/react-codemirror';

配置项支持

import 'codemirror/keymap/sublime';
import 'codemirror/addon/display/autorefresh';
import 'codemirror/addon/comment/comment';
import 'codemirror/addon/edit/matchbrackets';

样式引入

import 'codemirror/theme/monokai.css';

实例化

import React,{useRef, useLayoutEffect} from 'react';
const logView = useRef(null);

//滚动到底部
useLayoutEffect(() => {
    const { editor } = logView.current;
    setTimeout(() => {
      editor.refresh();
      editor.scrollIntoView({ line: editor.lineCount() - 1 });
    });
}, []);

const render = () => <>
  <h2>CodeMirror</h2>
  <CodeMirror
        ref={logView}
        height={750}
        value={value}
        options={{
            theme: 'monokai',
            keyMap: 'sublime',
            lineWrapping: true,
            mode: 'javascript',
            matchBrackets: true,
            readOnly: true,
        }}
    />
</>

option配置

opitions={{
    mode:"javascript" //实现代码高亮
    keyMap: "sublime" // 配置快捷键
    lineWrapping: true  // 自动换行
    matchBrackets:true //括号匹配
    readOnly: true //只读
    indentUnit: 2 // 缩进空格数,默认2
    smartIndent: true //自动缩进 默认true
    tabSize: 4 // tab字符宽度，默认4
    //... 具体可以参考文档
}}

编辑器

20220304115450.jpg

log展示

20220304115607.jpg