当我们在反应羽毛笔中上传图片时，是否有任何方法或插件可以帮助我们在反应羽毛笔中提供相应的属性（例如alt，高度和宽度）？？
请提供一个。预先感谢。
是否有其他设施可以提供所有设施。请提出一个最适合React的建议。
import React from 'react';
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import {Quill} from "quill";
import {Col, FormGroup, Label, Input, Button, Row} from 'reactstrap';
export const RichTextEditor = (props) => {
const data = props.content;
const discipline = props.content.disciplineData;
const modules = {
toolbar: [
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{font: []}],
[{size: []}],
[{color: []}, {background: []}],
[{script: 'sub'}, {script: 'super'}],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
/*[{ align: []}],*/
[{align: ''}, {align: 'center'}, {align: 'right'}, {align: 'justify'}],
[{list: 'ordered'}, {list: 'bullet'}],
[{'indent': '-1'}, {'indent': '+1'}],
['link', 'image', 'video'],
['clean'],
['code-block']
]
};
const formats = [
'header',
'font',
'size',
'color',
'script',
'background',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'align',
'list',
'indent',
'bullet',
'link',
'image',
'video',
'code-block'
];
function handleChange(e) {
props.handleChange(e);
}
function handlePostChange(e) {
props.handlePostChange(e);
}
function handleFileChange(e) {
props.handleFileChange(e);
}
function submitPost(e) {
props.submitPost(e);
}
return (
<div className="ck-card-width ck-box-shadow ck-add-padding-20px">
<fieldset>
<legend>Post New Blog</legend>
<Row>
<Col sm={{size: 9, offset: 3}}>
{data.categoryError ? <div className="ck--error">Category required.</div> : null}
</Col>
</Row>
<FormGroup row>
<Label for="category" sm={3} className="ck-label">Discipline:</Label>
<Col sm={9}>
<Input type="select" name="category" id="category" onChange={(e) => handleChange(e)}>
<option value="">Select category for blog</option>
{discipline ? discipline.map((data, index) => {
return (
<option key={index} value={data.discipline}>{data.discipline}</option>
)
}) : null}
<option value="Other">Other</option>
</Input>
</Col>
</FormGroup>
<Row>
<Col sm={{size: 9, offset: 3}}>
{data.otherCategoryError ? <div className="ck--error">Post category required.</div> : null}
</Col>
</Row>
<FormGroup className={data.isOtherCategory ? 'ck-display-block' : 'ck-display-none'}>
<Row>
<Col sm={{size: 9, offset: 3}}>
<Input type="text" name="otherCategory" onChange={(e) => handleChange(e)} id="otherCategory"
placeholder="Enter category of your post"></Input>
</Col>
</Row>
</FormGroup>
<Row>
<Col sm={{size: 9, offset: 3}}>
{data.postTitleError ? <div className="ck--error">Post title required.</div> : null}
</Col>
</Row>
<FormGroup row>
<Label for="postTitle" sm={3} className="ck-label">Post Title:</Label>
<Col sm={9}>
<Input type="text" name="postTitle" onChange={(e) => handleChange(e)} id="postTitle"
placeholder="Enter title of your post's title"></Input>
</Col>
</FormGroup>
<Row>
<Col sm={{size: 9, offset: 3}}>
{data.postTagError ? <div className="ck--error">Post tags required.</div> : null}
</Col>
</Row>
<FormGroup row>
<Label sm={3} className="ck-label">Post Tags:</Label>
<Col sm={9}>
<Tags inputTags={props.inputTags} handleInputChange={props.handleInputChange}
handleInputKeyDown={props.handleInputKeyDown} handleRemoveItem={props.handleRemoveItem}/>
</Col>
</FormGroup>
<Row>
<Col sm={{size: 9, offset: 3}}>
{data.postDescriptionError ? <div className="ck--error">Post description required.</div> : null}
</Col>
</Row>
<FormGroup row>
<Label for="postDescription" sm={3} className="ck-label">Post Description:</Label>
<Col sm={9}>
<Input type="text" name="postDescription" onChange={(e) => handleChange(e)} id="postDescription"
placeholder="Enter title of your post's description"></Input>
</Col>
</FormGroup>
<Row>
<Col sm={{size: 5, offset: 3}}>
{data.postImageError ? <div className="ck--error">Post image required.</div> : null}
</Col>
<Col sm={{size: 4, offset: 8}}>
{data.postImageAltError ? <div className="ck--error">Post image alt tag required.</div> : null}
</Col>
</Row>
<FormGroup row>
<Label for="postImage" sm={3} className="ck-label">Post's Image:</Label>
<Col sm={5}>
<Input type="file" name="postImage" onChange={(e) => handleFileChange(e)} id="postImage"
placeholder="Enter post's short description"></Input>
</Col>
<Col sm={4}>
<Input type="text" name="postImageAlt" onChange={(e) => handleChange(e)} id="postImageAlt"
placeholder="Enter alternative text for image"></Input>
</Col>
</FormGroup>
<Row>
<Col sm={{size: 12}}>
{data.postBodyError ? <div className="ck--error">Post required.</div> : null}
</Col>
</Row>
<FormGroup row>
<Col sm={12}>
<ReactQuill
name="postDescription"
id="postDescription"
modules={modules}
formats={formats}
value={props.postBody}
placeholder="Body"
onChange={handlePostChange}
/>
</Col>
</FormGroup>
<FormGroup row>
<Col sm={3}></Col>
<Col sm={9} className="ck-remove-15px">
<Button className="ck-college-profile-btn">Submit</Button>
</Col>
</FormGroup>
</fieldset>
</div>
)
}
export const Tags = (props) => {
const items = props.inputTags.items;
const foucus = props.inputTags.focused;
const input = props.inputTags.input;
const styles = {
container: {
border: '1px solid #9E9E9E',
padding: '5px',
borderRadius: '5px',
marginBottom: '0px'
},
items: {
background: '#2980b9',
color: '#ffffff',
display: 'inline-block',
padding: '1px 5px 1px 5px',
margin: '1px',
fontSize: '13px',
border: '1px solid #2980b9',
fontFamily: 'Helvetica, sans-serif',
borderRadius: '15px',
marginRight: '5px',
cursor: 'pointer'
},
input: {
padding: '2px',
outline: 'none',
border: 'none',
fontSize: '14px',
fontFamily: 'Helvetica, sans-serif',
width: '30%'
}
}
function handleInputChange(e) {
props.handleInputChange(e);
}
function handleInputKeyDown(e) {
props.handleInputKeyDown(e)
}
function handleRemoveItem(e, i) {
props.handleRemoveItem(i)
}
return (
<label className="embed-responsive" style={{marginBottom: '0px'}}>
<ul style={styles.container}>
{items.map((item, i) =>
<li key={i} style={styles.items} onClick={(e) => handleRemoveItem(e, i)}>
{item}
{/*<span><i className="fa fa-window-close-o" aria-hidden="true" style={{marginLeft:'5px'}}></i></span>*/}
</li>
)}
<input
style={styles.input}
value={input}
onChange={(e) => handleInputChange(e)}
onKeyDown={(e) => handleInputKeyDown(e)}
placeholder="Enter your tags for your blog"
/>
</ul>
</label>
)
}