与Antd Form使用时，提示 The label's for attribute doesn't match any element id

94550306 commented 1 month ago

问题描述

The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.

To fix this issue, make sure the label's for attribute references the correct id of a form field.

请输入遇到的问题...

    <Form.Item
      name="FExhibitionNote"
      label="Exhibition Note"
    >
      <MyEditor id="FExhibitionNote" onChange={(content) => form.setFieldsValue({ FExhibitionNote: content })} />
    </Form.Item>

wangEditor 版本

"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-react": "^1.0.6",
"antd": "^5.20.1",

请输入内容……

问题是：id要放在哪里才不报错？

是否查阅了文档？

（文档链接 www.wangeditor.com ）

是/否

最小成本的复现步骤

（请告诉我们，如何最快的复现该问题？）

步骤一
步骤二
步骤三

94550306 commented 1 month ago

MyEditor的代码

import React, { useState, useEffect } from 'react'; import '@wangeditor/editor/dist/css/style.css'; import { Editor, Toolbar } from '@wangeditor/editor-for-react'; import { i18nChangeLanguage } from '@wangeditor/editor'

// 切换语言 - 'en' 或者 'zh-CN' i18nChangeLanguage('en')

// Define types for editor instance import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';

interface MyEditorProps { id?: string; value?: string; // 允许外部传递初始内容 onChange?: (content: string) => void; // 用于传递内容变更 }

const MyEditor: React.FC = ({ id = "", value = '', onChange }) => { // editor instance can be null initially, so use IDomEditor | null type const [editor, setEditor] = useState<IDomEditor | null>(null); const [html, setHtml] = useState(''); // define the type for html state

// Define toolbar configuration
const toolbarConfig: Partial<IToolbarConfig> = {}; // toolbar config can be partial

// Define editor configuration
const editorConfig: Partial<IEditorConfig> = {
    placeholder: 'please insert ...',
    MENU_CONF: {}
};

// 确保 MENU_CONF 对象已经初始化
if (!editorConfig.MENU_CONF) {
    editorConfig.MENU_CONF = {};
}

editorConfig.MENU_CONF['uploadImage'] = {
    // form-data fieldName ，默认值 'wangeditor-uploaded-image'
    fieldName: 'logo',
    server: '/data/api/upload/wangeditor/picture',

    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 100 * 1024 * 1024,

    // 最多可上传几个文件，默认为 100
    maxNumberOfFiles: 10,

    // 跨域是否传递 cookie ，默认为 false
    withCredentials: true,

    // 超时时间，默认为 10 秒
    timeout: 300 * 1000, // 300 秒
}

editorConfig.MENU_CONF['uploadVideo'] = {
    // form-data fieldName ，默认值 'wangeditor-uploaded-video'
    fieldName: 'logo',
    server: '/data/api/upload/wangeditor/video',

    // 单个文件的最大体积限制，默认为 10M
    maxFileSize: 100 * 1024 * 1024,

    // 最多可上传几个文件，默认为 5
    maxNumberOfFiles: 3,

    // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
    // allowedFileTypes: ['video/*'],

    // 将 meta 拼接到 url 参数中，默认 false
    metaWithUrl: false,

    // 跨域是否传递 cookie ，默认为 false
    withCredentials: true,

    // 超时时间，默认为 30 秒
    timeout: 300 * 1000, // 300 秒
}

// 当组件挂载时设置初始内容
useEffect(() => {
    setHtml(value);
}, [value]);

// Ensure editor is destroyed properly when the component is unmounted
useEffect(() => {
    return () => {
        if (editor == null) return;
        editor.destroy();
        setEditor(null);
    };
}, [editor]);

// 编辑器内容变更时回调
const handleEditorChange = (editor: IDomEditor) => {
    const newHtml = editor.getHtml();
    setHtml(newHtml);
    if (onChange) {
        onChange(newHtml); // 调用父组件传递的 onChange 方法
    }
};

return (
    <div>
        {/* <div>
            <button onClick={insertText}>insert text</button>
            <button onClick={printHtml}>print html</button>
        </div> */}

        <div style={{ border: '1px solid #ccc', zIndex: 100, marginTop: '15px' }} id={id}>
            <Toolbar
                editor={editor}
                defaultConfig={toolbarConfig}
                mode="default"
                style={{ borderBottom: '1px solid #ccc' }}
            />
            <Editor
                defaultConfig={editorConfig}
                value={html}
                onCreated={setEditor}
                onChange={handleEditorChange}
                mode="default"
                style={{ height: '310px' }}
            />
        </div>
        {/* <div style={{ marginTop: '15px' }}>
            {html}
        </div> */}
    </div>
);

};

export default MyEditor;

cycleccc commented 1 month ago

需要最小复现，看着不像是 wangEditor 的问题。

94550306 commented 1 month ago

可能和antd form的配合的问题，现在不知道要提在这里，还是antd那里。

94550306 commented 1 month ago

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label 这篇关于label与input这样的关系；但是[wangEditor]好像没有这种设置

wangeditor-team / wangEditor