|
|
import React, { useState } from 'react'
|
|
|
import { Input, Form, Radio } from 'antd'
|
|
|
import './index.scss'
|
|
|
import { QuillForEditor } from 'educoder'
|
|
|
import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor'
|
|
|
const formItemLayout = {
|
|
|
labelCol: {
|
|
|
xs: { span: 24 },
|
|
|
sm: { span: 24 },
|
|
|
},
|
|
|
wrapperCol: {
|
|
|
xs: { span: 24 },
|
|
|
sm: { span: 24 },
|
|
|
},
|
|
|
}
|
|
|
const { TextArea } = Input
|
|
|
const TITLE_MAX_LENGTH = 60
|
|
|
|
|
|
function EditorTip() {
|
|
|
return <p className='editor-tip'>编辑器选择：<span> (请在下方选择一个您想使用的编辑器) </span></p>
|
|
|
}
|
|
|
|
|
|
const quillOpt = [
|
|
|
'bold',
|
|
|
'italic',
|
|
|
'underline', // 下划线
|
|
|
{ align: [] }, // 对齐方式
|
|
|
{ list: 'ordered' }, // 有序列表
|
|
|
{ list: 'bullet' }, // 无序列表
|
|
|
{ script: 'sub' }, // 下标 x2
|
|
|
{ script: 'super' }, // 上标 平方 (x2)
|
|
|
{ 'color': [] }, // 字体颜色
|
|
|
{ 'background': [] }, // 背景色
|
|
|
'blockquote', // 文件左边加一个边框样式
|
|
|
'image', // 图片
|
|
|
'formula', // 数学公式
|
|
|
'clean' // 清除
|
|
|
]
|
|
|
|
|
|
export default ({ exercise_name = '', exercise_description, is_md, onSaveHandler, isEdit, onCancel }) => {
|
|
|
|
|
|
const [data, setData] = useState({
|
|
|
exercise_name,
|
|
|
exercise_description,
|
|
|
is_md
|
|
|
})
|
|
|
|
|
|
function onChange(prop, value) {
|
|
|
setData({ ...data, [prop]: value })
|
|
|
}
|
|
|
|
|
|
function onNameChange(e) {
|
|
|
onChange('exercise_name', e.target.value)
|
|
|
}
|
|
|
|
|
|
function onDescChange(e) {
|
|
|
onChange('exercise_description', e.target.value)
|
|
|
}
|
|
|
|
|
|
function onEditorChange(e) {
|
|
|
onChange('is_md', e.target.value)
|
|
|
}
|
|
|
|
|
|
function onSave() {
|
|
|
onSaveHandler(data)
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<Form {...formItemLayout}>
|
|
|
<div className='exercise-new-form'>
|
|
|
<Form.Item label="试卷标题" required className="topicTitle " >
|
|
|
<Input placeholder={`请输入试卷标题，最大限制${TITLE_MAX_LENGTH}个字符`} maxLength={TITLE_MAX_LENGTH} className="mt5 exercicenewinputysl" value={data.exercise_name}
|
|
|
onChange={onNameChange} addonAfter={`${data.exercise_name.length}/${TITLE_MAX_LENGTH}`}
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
<Form.Item label=" 试卷须知" >
|
|
|
<TextArea placeholder="请在此输入本次试卷答题的相关说明，最大限制100个字符" className="mt5" style={{ height: "120px" }} value={data.exercise_description} onChange={onDescChange} />
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item label={<EditorTip />} colon={false}>
|
|
|
<Radio.Group onChange={onEditorChange} value={data.is_md}>
|
|
|
<Radio value={true}>Markdown 编辑器</Radio>
|
|
|
<Radio value={false}>富文本编辑器</Radio>
|
|
|
</Radio.Group>
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item>
|
|
|
{data.is_md ? <TPMMDEditor height={183} placeholder="体验过程输入的内容不会保存" refreshTimeout={1500} className="courseMessageMD" />
|
|
|
: <QuillForEditor placeholder='体验过程输入的内容不会保存' options={quillOpt} style={{ height: 123 }} />}
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item>
|
|
|
<a className="task-btn task-btn-orange fr mt4" onClick={onSave} >保存</a>
|
|
|
{isEdit && <a onClick={onCancel} className="defalutCancelbtn fr mt4">取消</a>}
|
|
|
</Form.Item>
|
|
|
</div>
|
|
|
|
|
|
</Form >
|
|
|
|
|
|
)
|
|
|
} |
