【前端-组件】UMI中使用react-monaco-editor封装编辑器表单 -【bysking】

文章讲究一个简洁明了，直接往下看

一、安装

yarn add monaco-editor react-monaco-editor
yarn add monaco-editor-webpack-plugin -D

// 对应版本信息如下
// "monaco-editor": "^0.51.0",
// "react-monaco-editor": "^0.56.1",
// "monaco-editor-webpack-plugin": "^7.1.0",

二、umi的配置文件中配置

//config.ts 或 .umirc.ts
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');


export default defineConfig({
  // ...其他umi配置
  chainWebpack: (memo) => {
    memo.plugin('monaco-editor-webpack-plugin').use(MonacoWebpackPlugin, [
      // 按需配置
      { languages: ['shell'] },
    ]);

    return memo;
  },
});

三、组件定义

这里顺便贴了常见的配置，有帮助记得点赞关注+收藏，持续更新干货

import MonacoEditor from 'react-monaco-editor';

interface typeProps {
  value?: string;
  onChange?: (value: string) => void;
  height?: number;
  readOnly?: boolean;
  options?: any;
}

const FormItemEditor = (props: typeProps) => {
  let { options = {} } = props;
  return (
    <div
      style={{
        height: props.height || 300,
        border: '1px solid rgb(5,5,5,0.06)',
        borderRadius: '8px',
        padding: '8px 2px 2px',
      }}
    >
      <MonacoEditor
        width="100%"
        language="shell"
        theme="vs-light"
        value={props.value || ''}
        onChange={props.onChange || (() => {})}
        options={{
          selectOnLineNumbers: true,
          matchBrackets: 'near',
          readOnly: props.readOnly,
          automaticLayout: true, // 自动布局
          scrollBeyondLastLine: false,
          foldingStrategy: 'indentation', // 代码可分小段折叠
          overviewRulerBorder: false, // 不要滚动条的边框
          cursorStyle: 'line', // 光标样式
          fixedOverflowWidgets: true, // hover提示框不被遮挡
          ...options,
          scrollbar: {
            useShadows: true,
            verticalHasArrows: true,
            horizontalHasArrows: true,
            vertical: 'visible',
            horizontal: 'visible',
            verticalScrollbarSize: 8,
            horizontalScrollbarSize: 8,
            arrowSize: 8,
            alwaysConsumeMouseWheel: false,
          },
        }}
      />
    </div>
  );
};

export default FormItemEditor;

四、使用示范

import FormItemEditor from '@/components/FormItemEditor';

  <ProFormItem
    label="sql"
    name="salStr"
    rules={[{ required: true }]}
  >
    <FormItemEditor options={{ lineNumbers: showLineNumbers }} />
  </ProFormItem>

如果想基于monaco-editor而不是react-monaco-editor，从头重新封装一个自己的编辑器，可以参考我之前的文章： 实现一个基于monaco-editor的编辑器组件【bysking】