|
|
|
@ -2,6 +2,7 @@ import React,{ Component } from "react";
|
|
|
|
|
|
|
|
|
|
|
|
import {getUrl,markdownToHTML} from 'educoder';
|
|
|
|
import {getUrl,markdownToHTML} from 'educoder';
|
|
|
|
import {Input,Button} from 'antd';
|
|
|
|
import {Input,Button} from 'antd';
|
|
|
|
|
|
|
|
import TPMMDEditor from "../tpm/challengesnew/TPMMDEditor";
|
|
|
|
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
|
|
|
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
|
|
|
|
|
|
|
|
|
|
|
import axios from 'axios';
|
|
|
|
import axios from 'axios';
|
|
|
|
@ -11,79 +12,11 @@ require('codemirror/lib/codemirror.css');
|
|
|
|
|
|
|
|
|
|
|
|
const $ = window.$;
|
|
|
|
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();
|
|
|
|
|
|
|
|
var id = this.id;
|
|
|
|
|
|
|
|
var editorName = this;
|
|
|
|
|
|
|
|
$("#" + 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 - 3);
|
|
|
|
|
|
|
|
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{
|
|
|
|
class PathNew extends Component{
|
|
|
|
constructor(props){
|
|
|
|
constructor(props){
|
|
|
|
super(props);
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.contentMdRef = React.createRef();
|
|
|
|
|
|
|
|
this.Point_editMD = React.createRef();
|
|
|
|
this.state={
|
|
|
|
this.state={
|
|
|
|
pathName:"",
|
|
|
|
pathName:"",
|
|
|
|
description:"",
|
|
|
|
description:"",
|
|
|
|
@ -104,7 +37,7 @@ class PathNew extends Component{
|
|
|
|
})
|
|
|
|
})
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let des=this.Des_editMD.getValue();
|
|
|
|
let des= this.contentMdRef.current.getValue().trim();
|
|
|
|
if(des===""){
|
|
|
|
if(des===""){
|
|
|
|
this.props.showSnackbar("请输入实践课程的简介");
|
|
|
|
this.props.showSnackbar("请输入实践课程的简介");
|
|
|
|
window.location.href="#part_Des";
|
|
|
|
window.location.href="#part_Des";
|
|
|
|
@ -115,7 +48,7 @@ class PathNew extends Component{
|
|
|
|
window.location.href="#part_Des";
|
|
|
|
window.location.href="#part_Des";
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let point = this.Point_editMD.getValue();
|
|
|
|
let point = this.Point_editMD.current.getValue().trim();
|
|
|
|
if(point===""){
|
|
|
|
if(point===""){
|
|
|
|
this.props.showSnackbar("请输入实践课程的学习须知");
|
|
|
|
this.props.showSnackbar("请输入实践课程的学习须知");
|
|
|
|
window.location.href="#part_point";
|
|
|
|
window.location.href="#part_point";
|
|
|
|
@ -207,13 +140,9 @@ class PathNew extends Component{
|
|
|
|
this.setState({
|
|
|
|
this.setState({
|
|
|
|
pathName: response.data.name
|
|
|
|
pathName: response.data.name
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
this.contentMdRef.current.setValue(response.data && response.data.description);
|
|
|
|
|
|
|
|
this.Point_editMD.current.setValue(response.data && response.data.learning_notes);
|
|
|
|
|
|
|
|
|
|
|
|
const Des_editMD = create_editorMD("shixun_introduction","100%","490px"
|
|
|
|
|
|
|
|
,"请在此输入实践课程的简介，最大限制8000个字符","/api/attachments.json", response.data.description,"");
|
|
|
|
|
|
|
|
this.Des_editMD=Des_editMD;
|
|
|
|
|
|
|
|
const Point_editMD = create_editorMD("shixun_propaedeutics","100%","260px"
|
|
|
|
|
|
|
|
,"请在此输入实践课程的学习须知，最大限制2000个字符","/api/attachments.json",response.data.learning_notes,"");
|
|
|
|
|
|
|
|
this.Point_editMD=Point_editMD;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}).catch((error)=>{
|
|
|
|
}).catch((error)=>{
|
|
|
|
console.log(error);
|
|
|
|
console.log(error);
|
|
|
|
@ -221,10 +150,8 @@ class PathNew extends Component{
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.isEditPage = false
|
|
|
|
this.isEditPage = false
|
|
|
|
|
|
|
|
|
|
|
|
const Des_editMD = create_editorMD("shixun_introduction","100%","490px","请在此输入实践课程的简介，最大限制8000个字符","/api/attachments.json","","");
|
|
|
|
this.contentMdRef.current.setValue("");
|
|
|
|
this.Des_editMD=Des_editMD;
|
|
|
|
this.Point_editMD.current.setValue("");
|
|
|
|
const Point_editMD = create_editorMD("shixun_propaedeutics","100%","260px","请在此输入实践课程的学习须知，最大限制2000个字符","/api/attachments.json","","");
|
|
|
|
|
|
|
|
this.Point_editMD=Point_editMD;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -266,8 +193,14 @@ class PathNew extends Component{
|
|
|
|
<div className="df">
|
|
|
|
<div className="df">
|
|
|
|
<span className="mr30 color-orange pt10">*</span>
|
|
|
|
<span className="mr30 color-orange pt10">*</span>
|
|
|
|
<div className="flex1 mr20">
|
|
|
|
<div className="flex1 mr20">
|
|
|
|
<div id="shixun_introduction" className="new_li editormd editormd-vertical">
|
|
|
|
<div id="shixun_introduction" className="new_li">
|
|
|
|
<textarea className="input-100-45" name="description" placeholder="请在此输入实践课程的简介" value={description}></textarea>
|
|
|
|
{/*<textarea className="input-100-45" name="description" placeholder="请在此输入实践课程的简介" value={description}></textarea>*/}
|
|
|
|
|
|
|
|
<TPMMDEditor ref={this.contentMdRef} placeholder="请在此输入实践课程的简介，最大限制8000个字符" mdID={'courseContentMD'}
|
|
|
|
|
|
|
|
refreshTimeout={1500}
|
|
|
|
|
|
|
|
className="courseMessageMD"
|
|
|
|
|
|
|
|
// initValue={this.state.description === null ? "" : this.state.description}
|
|
|
|
|
|
|
|
></TPMMDEditor>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p id="e_tip_shixun_introduction" className="edu-txt-right color-grey-cd font-12"></p>
|
|
|
|
<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>
|
|
|
|
<p id="e_tips_shixun_introduction" className="edu-txt-right color-grey-cd font-12"></p>
|
|
|
|
@ -280,8 +213,13 @@ class PathNew extends Component{
|
|
|
|
<div className="df">
|
|
|
|
<div className="df">
|
|
|
|
<span className="mr30 color-orange pt10">*</span>
|
|
|
|
<span className="mr30 color-orange pt10">*</span>
|
|
|
|
<div className="flex1 mr20">
|
|
|
|
<div className="flex1 mr20">
|
|
|
|
<div id="shixun_propaedeutics" className="new_li editormd editormd-vertical">
|
|
|
|
<div id="shixun_propaedeutics" className="new_li ">
|
|
|
|
<textarea name="learning_notes" placeholder="请在此输入实践课程的学习须知" value={point}></textarea>
|
|
|
|
{/*<textarea name="learning_notes" placeholder="请在此输入实践课程的学习须知" value={point}></textarea>*/}
|
|
|
|
|
|
|
|
<TPMMDEditor ref={this.Point_editMD} placeholder="请在此输入实践课程的学习须知，最大限制2000个字符" mdID={'Point_editMDs'}
|
|
|
|
|
|
|
|
refreshTimeout={1500}
|
|
|
|
|
|
|
|
className="courseMessageMD"
|
|
|
|
|
|
|
|
// initValue={this.state.description === null ? "" : this.state.description}
|
|
|
|
|
|
|
|
></TPMMDEditor>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p id="e_tip_shixun_propaedeutics" className="edu-txt-right color-grey-cd font-12"></p>
|
|
|
|
<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>
|
|
|
|
<p id="e_tips_shixun_propaedeutics" className="edu-txt-right color-grey-cd font-12"></p>
|
|
|
|
|
tangjiang
5 years ago