educoder/public/react/src/modules/paths/PathNew.js

import React,{ Component } from "react";

import {getUrl,markdownToHTML} from 'educoder';
import {Input} from 'antd';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

import axios from 'axios';
// import '../page/tpiPage.css';
require('codemirror/lib/codemirror.css');


const $ = window.$;

let origin = getUrl();
let path = getUrl("/editormd/lib/");
function create_editorMD(id, width, high, placeholder, imageUrl,initValue, callback) {
  var editorName = window.editormd(id, {
      width: width,
      height: high,
      path: path,   // "/editormd/lib/"
      markdown : initValue,
      syncScrolling: "single",
      tex: true,
      tocm: true,
      emoji: true,
      taskList: true,
      codeFold: true,
      searchReplace: true,
      htmlDecode: "style,script,iframe",
      sequenceDiagram: true,
      autoFocus: false,
      placeholder: placeholder,
      toolbarIcons: function () {
          // Or return editormd.toolbarModes[name]; // full, simple, mini
          // Using "||" set icons align right.
          return ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "watch", "clear"]
      },
      toolbarCustomIcons: {
          testIcon: "<a type=\"inline\" class=\"latex\" ><div class='zbg'></div></a>",
          testIcon1: "<a type=\"latex\" class=\"latex\" ><div class='zbg_latex'></div></a>"
      },
      //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
      saveHTMLToTextarea: true,
      // 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
      dialogMaskOpacity: 0.6,
      imageUpload: true,
      imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
      imageUploadURL: imageUrl,//url
      onload: function () {
          // this.previewing();
          $("#" + id + " [type=\"latex\"]").bind("click", function () {
              editorName.cm.replaceSelection("```latex");
              editorName.cm.replaceSelection("\n");
              editorName.cm.replaceSelection("\n");
              editorName.cm.replaceSelection("```");
              var __Cursor = editorName.cm.getDoc().getCursor();
              editorName.cm.setCursor(__Cursor.line - 1, 0);
          });

          $("#" + id + " [type=\"inline\"]").bind("click", function () {
              editorName.cm.replaceSelection("$$$$");
              var __Cursor = editorName.cm.getDoc().getCursor();
              editorName.cm.setCursor(__Cursor.line, __Cursor.ch - 2);
              editorName.cm.focus();
          });
          $("[type=\"inline\"]").attr("title", "行内公式");
          $("[type=\"latex\"]").attr("title", "多行公式");


          callback && callback()
      }
  });
  // 一个页面有多个md时，onload方法只执行了一次
  // window.md_elocalStorage(editorName, `MemoQuestion_${id}`, `${id}`);

  return editorName;
}




class PathNew extends Component{
  constructor(props){
    super(props);
    this.state={
      pathName:"",
      description:"",
      point:"",
      flag_name:true
    }
  }

  // 提交
  submitNewPath=()=>{
    let {pathName} = this.state;
    if(pathName===""){
      this.props.showSnackbar("请输入实践课程名称");
      window.location.href="#part_Name";
      this.setState({
        flag_name:false
      })
      return;
    }
    let des=this.Des_editMD.getValue();
    if(des===""){
      this.props.showSnackbar("请输入实践课程的简介");
      window.location.href="#part_Des";
      return;
    }
    if (des.length > 8000) {
      this.props.showSnackbar("实践课程的简介最大限制5000个字符");
      window.location.href="#part_Des";
      return;
    }
    let point = this.Point_editMD.getValue();
    if(point===""){
      this.props.showSnackbar("请输入实践课程的学习须知");
      window.location.href="#part_point";
      return;
    }
    if(point.length > 2000){
      this.props.showSnackbar("实践课程的学习须知最大限制500个字符");
      window.location.href="#part_point";
      return;
    }
    if (this.isEditPage == true) {
      let pathId = this.props.match.params.pathId;

      const editUrl = `/paths/${pathId}.json`
      axios.put(editUrl,{
        name:pathName,
        description:des,
        learning_notes:point
      }).then((response)=>{
        // console.log(response.data.subject_id);
        if (response.data.subject_id) {
          this.props.history.push(`/paths/${response.data.subject_id}`)
        }
      }).catch((error)=>{
        console.log(error);
      })
    } else {
      let url="/paths.json"
      axios.post(url,{
        name:pathName,
        description:des,
        learning_notes:point
      }).then((response)=>{
        // console.log(response.data.subject_id);
        if (response.data.subject_id) {
          this.props.history.push(`/paths/${response.data.subject_id}`)
        }
      }).catch((error)=>{
        console.log(error);
      })
    }
    
  }

  componentDidMount() {

		let url = "/paths/new.json"
		axios.get(url).then((result) => {
			console.log(result)
		}).catch((error) => {
			console.log(error);
		})


    let pathId = this.props.match.params.pathId;
    if (pathId) {
      this.isEditPage = true

      // const url = `/paths/${pathId}.json`
      const url = `/paths/${pathId}/edit.json`
      axios.get(url).then((response)=>{
        /**
          description:
          id: 13
          learning_notes:
          name: 
         */ 
         if (response.data.name) {
          this.setState({
            pathName: response.data.name
          })

          const Des_editMD = create_editorMD("shixun_introduction","100%","490px"
            ,"请在此输入实践课程的简介，最大限制5000个字符","/api/attachments.json", response.data.description,"");
          this.Des_editMD=Des_editMD;
          const Point_editMD = create_editorMD("shixun_propaedeutics","100%","260px"
            ,"请在此输入实践课程的学习须知，最大限制500个字符","/api/attachments.json",response.data.learning_notes,"");
          this.Point_editMD=Point_editMD;
         }
      }).catch((error)=>{
        console.log(error);
      })
    } else {
      this.isEditPage = false

      const Des_editMD = create_editorMD("shixun_introduction","100%","490px","请在此输入实践课程的简介，最大限制5000个字符","/api/attachments.json","","");
      this.Des_editMD=Des_editMD;
      const Point_editMD = create_editorMD("shixun_propaedeutics","100%","260px","请在此输入实践课程的学习须知，最大限制500个字符","/api/attachments.json","","");
      this.Point_editMD=Point_editMD;
    }
    
  }

  InputName=(e)=>{
    this.setState({
      pathName:e.target.value,
    })
  }

  render(){
    let pathId = this.props.match.params.pathId;

    let {pathName,description,point,flag_name}=this.state;
    return(
      <div className="newContainer">
        <div className="newMain clearfix">
          <div className="educontent mt10 mb50">
            <div className="mb10 edu-back-white">
              <p className="padding20 bor-bottom-greyE font-18 color-grey-3">{pathId ? '编辑' : '创建'}实践课程</p>
              <div className="padding30-20" id="part_Name">
                <p className="color-grey-6 font-16 mb15">实践课程名称</p>
                <div className="df">
                  <span className="mr30 color-orange pt10">*</span>
                  <div className="flex1 mr20">
                    <Input className={flag_name===true?"input-100-45 greyInput":"input-100-45 greyInput bor-red"}
                      maxLength="60"
                      placeholder="例如：从Python程序设计-入门精通"
                      value={pathName}
                      onInput={this.InputName}
                    ></Input>
                  </div>
                </div>
              </div>
            </div>

            <div className="mb10 edu-back-white padding30-20" id="part_Des">
              <p className="color-grey-6 font-16 mb15">简介</p>
              <div className="df">
                <span className="mr30 color-orange pt10">*</span>
                <div className="flex1 mr20">
                  <div id="shixun_introduction" className="new_li editormd editormd-vertical">
                    <textarea className="input-100-45" name="description" placeholder="请在此输入实践课程的简介" value={description}></textarea>
                  </div>
                  <p id="e_tip_shixun_introduction" className="edu-txt-right color-grey-cd font-12"></p>
                  <p id="e_tips_shixun_introduction" className="edu-txt-right color-grey-cd font-12"></p>
                </div>
              </div>
            </div>

            <div className="mb10 edu-back-white padding30-20" id="part_point">
              <p className="color-grey-6 font-16 mb15" id="learning_notes">学习须知</p>
              <div className="df">
                <span className="mr30 color-orange pt10">*</span>
                <div className="flex1 mr20">
                  <div id="shixun_propaedeutics" className="new_li editormd editormd-vertical">
                    <textarea name="learning_notes" placeholder="请在此输入实践课程的学习须知" value={point}></textarea>
                  </div>
                  <p id="e_tip_shixun_propaedeutics" className="edu-txt-right color-grey-cd font-12"></p>
                  <p id="e_tips_shixun_propaedeutics" className="edu-txt-right color-grey-cd font-12"></p>
                </div>
              </div>
            </div>
            
            <div className="clearfix mb30 mt30">
              <a href="javascript:void(0)" className="defalutSubmitbtn fl mr20" onClick={this.submitNewPath}>提交</a>
              {this.isEditPage ? 
                <Link to={`/paths/${this.props.match.params.pathId}`} 
                    className="defalutCancelbtn fl">取消</Link>
                : <Link to={`/paths`} className="defalutCancelbtn fl">取消</Link>
                }
            </div>
          
          </div>
        </div>
        
      </div>
    )
  }
}
export default PathNew;