react19实现在线代码编辑器-codemirror与monaco（并是放置在表单中）

本文章提供两个在线代码编辑器实现代码 

import CodeMirror from '@uiw/react-codemirror'

  // 获取 CodeMirror 的值，设置为 Form 的字段值
  function handleCodemirrorEditorChange(value: string | undefined) {
    form.setFieldsValue({ fieldC: value || '' }) // 更新 form 数据
  }
            
              
            

import Editor from '@monaco-editor/react'

  // 获取 Editor 的值，设置为 Form 的字段值
  function handleEditorChange(value: string | undefined) {
    form.setFieldsValue({ fieldB: value || '' }) // 更新 form 数据
  }

            
              
            

import { Button, Space, Col, Row, Form, Input, Tag } from 'antd'
import styles from './AddOptsModal.module.scss'
import CodeMirror from '@uiw/react-codemirror'
import { python } from '@codemirror/lang-python'
import Editor from '@monaco-editor/react'

interface AddOptsModalProps {
  onCancel: () => void
  onOk: () => void
}

const customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => (
  <>
    {required ? 必填字段 : 可选字段}
    {label}
  
)

const AddOptsModal: React.FC = ({ onCancel, onOk }) => {
  const [form] = Form.useForm()
  // 提交表单的处理函数
  function submitForm() {
    form
      .validateFields() // 验证表单
      .then(values => {
        // 验证成功，调用 onOk
        console.log('表单数据：', values)
        onOk() // 这里是你的确认操作
      })
      .catch(errorInfo => {
        // 验证失败，输出错误信息
        console.log('表单验证失败：', errorInfo)
      })
  }
  // 获取 Editor 的值，设置为 Form 的字段值
  function handleEditorChange(value: string | undefined) {
    form.setFieldsValue({ fieldB: value || '' }) // 更新 form 数据
  }
  // 获取 Editor 的值，设置为 Form 的字段值
  function handleCodemirrorEditorChange(value: string | undefined) {
    form.setFieldsValue({ fieldC: value || '' }) // 更新 form 数据
  }
  return (
    

      

        
          {/* 使用 Row 来控制列间距 */}
          
            {/* 左侧列 */}
            
              
            
            
              
            
          
          
            {/* 右侧列 */}
            
              
            
            
              
            
          
        

        

          
            关闭
            
              确认
            
          
        
      
    
  )
}

export default AddOptsModal