红框

public/react/src/common/components/markdown/DMDEditor.js

@@ -39,18 +39,29 @@ class DMDEditor extends Component{
   onChange = (val) => {
     //   this.setState({ value: val })
     this.props.onChange(val)
+    if (this.state.showError == true) {
+      this.setState({showError: false})
+    }
+  }
+  showError = () => {
+    this.mdRef.current.showError()
+    this.setState({showError: true})
   }
   render(){
-    const { mdMode } = this.state;
+    const { mdMode, showError } = this.state;
     const { initValue } = this.props;
-    
+    let _style = {}
+    if (showError) {
+        _style.border = '1px solid red'
+    }
+    _style = Object.assign(_style, {display: mdMode == true ? 'none' : '', color: initValue? '': '#999', alignItems: 'center',  wordBreak: 'break-all'})
     return(
       <React.Fragment>
         <style>{`
             
         `}</style>
         <div id="content_editorMd_show" className="new_li content_editorMd_show" 
-                style={{display: mdMode == true ? 'none' : '', color: initValue? '': '#999', alignItems: 'center',  wordBreak: 'break-all'}}
+                style={_style}
                 dangerouslySetInnerHTML={{__html: initValue ? markdownToHTML(initValue):this.props.placeholder}}
                 onClick={this.toMDMode}
         >

public/react/src/modules/courses/exercise/new/JudgeEditor.js

@@ -55,7 +55,9 @@ class SingleEditor extends Component{
     // TODO check
     const answerArray = standard_answers.map((item, index) => { return item == true ? index+1 : -1 }).filter(item => item != -1);
     if(!question_title) {
+      this.refs['titleEditor'].showError()
       this.props.showNotification('题目不能为空'); return;
+
     }
     const intScore = parseFloat(question_score)
     if(!question_score || intScore == NaN) {
@@ -69,7 +71,9 @@ class SingleEditor extends Component{
       this.props.showNotification('请先点击本题的正确选项'); return;
     }
     if(!question_title) {
+      this.refs['titleEditor'].showError()
       this.props.showNotification('题目不能为空'); return;
+
     }
 
     /**
@@ -185,6 +189,7 @@ class SingleEditor extends Component{
 
             <TPMMDEditor mdID={`question_${question_id}`} placeholder="请您输入题目" height={155} watch={false}
               initValue={question_title} onChange={(val) => this.setState({ question_title: val})}
+              ref="titleEditor"
             ></TPMMDEditor>
             
             <div>

public/react/src/modules/courses/exercise/new/MainEditor.js

@@ -45,7 +45,10 @@ class MainEditor extends Component{
     // TODO check
     const answerArray = standard_answers
     if(!question_title) {
+      this.refs['titleEditor'].showError()
       this.props.showNotification('题目不能为空'); return;
+
+
     }
     const intScore = parseFloat(question_score)
     if(!question_score || intScore == NaN) {
@@ -151,7 +154,7 @@ class MainEditor extends Component{
 
             <TPMMDEditor mdID={`question_${question_id}`} placeholder="请您输入题目" height={155} watch={false}
               initValue={question_title} onChange={(val) => this.setState({ question_title: val})}
-              noStorage={true}
+              noStorage={true} ref="titleEditor"
             ></TPMMDEditor>
             
             <div>

public/react/src/modules/courses/exercise/new/NullChildEditor.js

@@ -35,6 +35,10 @@ class NullChildEditor extends Component{
   //   this.mdReactObject = that;
   // }
 
+  showError = (itemIndex) => {
+    this.refs[`nullChildDMDEditor${itemIndex}`].showError()
+  }
+
   render() {
     let { question_title, question_score, question_type, question_choices, standard_answers } = this.state;
     let { question_id, index, onAnswerChange, addChildAnswer, toMDMode, exerciseIsPublish, 
@@ -49,6 +53,7 @@ class NullChildEditor extends Component{
                     return <div className="df flex1" >
                     <div className="flex1" style={{ flex: '0 0 1000px'}}>
                       <DMDEditor
+                          ref={`nullChildDMDEditor${itemIndex}`}
                           className={'nullChildEditor'}
                           placeholder={`请输入参考答案${itemIndex == 0 ?'':'(可选)'}`}
                           toMDMode={toMDMode} noStorage={true}

public/react/src/modules/courses/exercise/new/NullEditor.js

@@ -69,7 +69,9 @@ class NullEditor extends Component{
     // const answerArray = standard_answers.map((item, index) => { return item == true ? index+1 : -1 }).filter(item => item != -1);
     let answerArray = []
     if(!question_title) {
+      this.refs['titleEditor'].showError()
       this.props.showNotification('题目不能为空'); return;
+
     }
     const intScore = parseFloat(question_score)
     if(!question_score || intScore == NaN) {
@@ -88,6 +90,7 @@ class NullEditor extends Component{
       answers.forEach((item, itemIndex) => {
         answerArray[index].answer_text.push(item)
         if(!item) {
+          this.refs[`nullChildEditor${index}`].showError(itemIndex)
           this.props.showNotification(`请先输入第${index+1}个填空的第${itemIndex+1}参考答案。`); 
           isEmpty = true;
         }
@@ -97,7 +100,9 @@ class NullEditor extends Component{
       return;
     }
     if(!question_title) {
+      this.refs['titleEditor'].showError()
       this.props.showNotification('题目不能为空'); return;
+
     }
 
     /**
@@ -294,13 +299,16 @@ class NullEditor extends Component{
             <NullMDEditor {...this.props} mdID={`question_${question_id}`} placeholder="请您输入题目" height={155} watch={false}
               initValue={question_title} onChange={(val) => this.setState({ question_title: val})}
               onPlaceholderChange={this.onPlaceholderChange} showNullButton={exerciseIsPublish ? false : true}
+              ref="titleEditor"
             ></NullMDEditor>
             
             <div className="clearfix">
               {
                 standard_answers.map((answers, index) => {
 
-                  return <NullChildEditor {...this.props}
+                  return <NullChildEditor 
+                    ref={`nullChildEditor${index}`}
+                    {...this.props}
                     toMDMode={this.toMDMode}
                     answers={answers}
                     index={index}

public/react/src/modules/courses/exercise/new/NullMDEditor.js

@@ -84,7 +84,9 @@ export default class NullMDEditor extends Component {
         
     }
 
-
+    showError = () => {
+      this.refs['nullMDEditor'].showError()
+    }
     render() {
 
         let {
@@ -94,6 +96,7 @@ export default class NullMDEditor extends Component {
         return (
             <TPMMDEditor {...this.props}
                 onCMBeforeChange={this.onCMBeforeChange}
+                ref='nullMDEditor'
             >    
             </TPMMDEditor>
         )

public/react/src/modules/courses/exercise/new/SingleEditor.js

@@ -87,7 +87,10 @@ class SingleEditor extends Component{
     // TODO check
     const answerArray = standard_answers.map((item, index) => { return item == true ? index+1 : -1 }).filter(item => item != -1);
     if(!question_title) {
+      this.refs['titleEditor'].showError()
       this.props.showNotification('题目不能为空'); return;
+
+
     }
     const intScore = parseFloat(question_score)
     if(!question_score || intScore == NaN) {
@@ -101,11 +104,15 @@ class SingleEditor extends Component{
       this.props.showNotification('请先点击选择本选择题的正确选项'); return;
     }
     if(!question_title) {
+      this.refs['titleEditor'].showError()
       this.props.showNotification('题目不能为空'); return;
+
+
     }
 
     for(let i = 0; i < question_choices.length; i++) {
       if (!question_choices[i]) {
+        this.refs[`optionEditor${i}`].showError()
         this.props.showNotification(`请先输入 ${tagArray[i]} 选项的内容`); return;
       }
     }
@@ -237,6 +244,8 @@ class SingleEditor extends Component{
 
             <TPMMDEditor mdID={qNumber} placeholder="请您输入题目" height={155} watch={false} className="mb20"
               initValue={question_title} onChange={(val) => this.setState({ question_title: val})}
+              ref="titleEditor"
+
             ></TPMMDEditor>
             
             {question_choices.map( (item, index) => {
@@ -254,6 +263,7 @@ class SingleEditor extends Component{
                 {/* </Tooltip> */}
                 <div style={{ flex: '0 0 1038px'}}>
                 <DMDEditor 
+                  ref={`optionEditor${index}`}
                   toMDMode={this.toMDMode} toShowMode={this.toShowMode}
                   height={166} className={'optionMdEditor'} watch={false} noStorage={true}
                   mdID={qNumber + index} placeholder="" onChange={(value) => this.onOptionContentChange(value, index)}

public/react/src/modules/tpm/challengesnew/TPMMDEditor.js

@@ -239,7 +239,9 @@ export default class TPMMDEditor extends Component {
             }
             __editorName.cm.on("change", (_cm, changeObj) => {
                 that.contentChanged = true;
-
+                if (that.state.showError) {
+                    that.setState({showError: false})
+                }
                 that.onEditorChange()
             })
             that.props.onCMBlur && __editorName.cm.on('blur', () => {
@@ -256,6 +258,9 @@ export default class TPMMDEditor extends Component {
         }, this);
         
     }
+    showError = () => {
+        this.setState({showError: true})
+    }
     onEditorChange = () => {
         if (!this.answers_editormd) return;
         const val = this.answers_editormd.getValue();
@@ -297,14 +302,18 @@ export default class TPMMDEditor extends Component {
     render() {
 
         let {
-            choice_url,
+            showError
         } = this.state;
         let { mdID, className, noStorage } = this.props;
+        let _style = {}
+        if (showError) {
+            _style.border = '1px solid red'
+        }
         return (
             <React.Fragment>
-                <div className={`df ${className}`}>
+                <div className={`df ${className}`} >
                 {/* padding10-20  */}
-                    <div className="edu-back-greyf5 radius4" id={`mdEditor_${mdID}`}>
+                    <div className="edu-back-greyf5 radius4" id={`mdEditor_${mdID}`} style={{..._style}}>
                         <textarea style={{display: 'none'}}  id="evaluate_script_show" name="content"></textarea>
                         <div className="CodeMirror cm-s-defualt">
                         </div>