diff --git a/public/react/src/modules/tpm/challengesnew/TPMMDEditor.js b/public/react/src/modules/tpm/challengesnew/TPMMDEditor.js index 64cc373dc..05a9e55ff 100644 --- a/public/react/src/modules/tpm/challengesnew/TPMMDEditor.js +++ b/public/react/src/modules/tpm/challengesnew/TPMMDEditor.js @@ -1,48 +1,30 @@ -import React, {Component} from 'react'; +import React, { Component } from 'react'; -import {Input, Select, Radio, Checkbox, Popconfirm, message, Modal} from 'antd'; - -import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom"; - -// import "antd/dist/antd.css"; - -import { getImageUrl, getUploadActionUrl, getUrl } from 'educoder'; +import { getUploadActionUrl, getUrl } from 'educoder'; import '../../courses/css/Courses.css' -import axios from 'axios'; - import './css/TPMchallengesnew.css'; require('codemirror/lib/codemirror.css'); -let origin = getUrl(); let path = '/editormd/lib/' - path = getUrl("/editormd/lib/") +path = getUrl("/editormd/lib/") const $ = window.$; -let timeout; - -let currentValue; - -const Option = Select.Option; - -const RadioGroup = Radio.Group; - - // 保存数据 -function md_add_data(k,mdu,d){ - window.sessionStorage.setItem(k+mdu,d); +function md_add_data(k, mdu, d) { + window.sessionStorage.setItem(k + mdu, d); } // 清空保存的数据 -function md_clear_data(k,mdu,id){ - window.sessionStorage.removeItem(k+mdu); - var id1 = "#e_tip_"+id; - var id2 = "#e_tips_"+id; - if(k == 'content'){ +function md_clear_data(k, mdu, id) { + window.sessionStorage.removeItem(k + mdu); + var id1 = "#e_tip_" + id; + var id2 = "#e_tips_" + id; + if (k == 'content') { $(id2).html("　"); - }else{ + } else { $(id1).html("　"); } } @@ -59,16 +41,16 @@ function md_rec_data(k, mdu, id) { } window.md_rec_data = md_rec_data; -function md_elocalStorage(editor,mdu,id){ - if (window.sessionStorage){ - var oc = window.sessionStorage.getItem('content'+mdu); - if(oc !== null && oc != editor.getValue()){ - console.log("#e_tips_"+id) - $("#e_tips_"+id).data('editor', editor); - var h = '您上次有已保存的数据，是否恢复 ? / 不恢复'; - $("#e_tips_"+id).html(h); +function md_elocalStorage(editor, mdu, id) { + if (window.sessionStorage) { + var oc = window.sessionStorage.getItem('content' + mdu); + if (oc !== null && oc != editor.getValue()) { + console.log("#e_tips_" + id) + $("#e_tips_" + id).data('editor', editor); + var h = '您上次有已保存的数据，是否恢复 ? / 不恢复'; + $("#e_tips_" + id).html(h); } - setInterval(function() { + setInterval(function () { var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); @@ -76,46 +58,46 @@ function md_elocalStorage(editor,mdu,id){ h = h < 10 ? '0' + h : h; m = m < 10 ? '0' + m : m; s = s < 10 ? '0' + s : s; - if(editor.getValue().trim() != ""){ - md_add_data("content",mdu,editor.getValue()); - var id1 = "#e_tip_"+id; - var id2 = "#e_tips_"+id; - + if (editor.getValue().trim() != "") { + md_add_data("content", mdu, editor.getValue()); + var id1 = "#e_tip_" + id; + var id2 = "#e_tips_" + id; + var textStart = " 数据已于 " - var text = textStart + h + ':' + m + ':' + s +" 保存 "; + var text = textStart + h + ':' + m + ':' + s + " 保存 "; // 占位符 var oldHtml = $(id2).html(); if (oldHtml && oldHtml != '　' && oldHtml.startsWith(textStart) == false) { - $(id2).html( oldHtml.split('　(')[0] + `　(${text})`); + $(id2).html(oldHtml.split('　(')[0] + `　(${text})`); } else { $(id2).html(text); } // $(id2).html(""); } - },10000); + }, 10000); - }else{ - $("#e_tip_"+id).after('您的浏览器不支持localStorage.无法开启自动保存草稿服务,请升级浏览器！'); + } else { + $("#e_tip_" + id).after('您的浏览器不支持localStorage.无法开启自动保存草稿服务,请升级浏览器！'); } } -function create_editorMD(id, width, high, placeholder, imageUrl, callback, initValue, - onchange, watch, { noStorage, showNullButton, emoji }, that) { +function create_editorMD(id, width, high, placeholder, imageUrl, callback, initValue, + onchange, watch, { noStorage, showNullButton, emoji }, that) { // 还是出现了setting只有一份，被共用的问题 - + var editorName = window.editormd(id, { width: width, - height: high===undefined?400:high, - path: path, // "/editormd/lib/" - markdown : initValue, + height: high === undefined ? 400 : high, + path: getUrl("/editormd/lib/"), // "/editormd/lib/" + markdown: initValue, dialogLockScreen: false, - watch:watch===undefined?true:watch, + watch: watch === undefined ? true : watch, syncScrolling: "single", tex: true, tocm: true, - emoji: !!emoji , + emoji: !!emoji, taskList: true, codeFold: true, searchReplace: true, @@ -123,21 +105,35 @@ function create_editorMD(id, width, high, placeholder, imageUrl, callback, initV sequenceDiagram: true, autoFocus: false, - // mine - toolbarIcons: function (mdEditor) { let react_id = `react_${mdEditor.id}`; const __that = window[react_id] - - // Or return editormd.toolbarModes[name]; // full, simple, mini // Using "||" set icons align right. - const icons = ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "link", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "watch", "clear"]; + const icons = ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "link", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "line-break", "watch", "clear"]; // 试卷处用到的填空题新增按钮 if (__that.props.showNullButton) { icons.push('nullBtton') } return icons }, + toolbarIconsClass: { + "line-break": "fa-minus" + }, + toolbarHandlers: { + /** + * @param {Object} cm CodeMirror对象 + * @param {Object} icon 图标按钮jQuery元素对象 + * @param {Object} cursor CodeMirror的光标对象，可获取光标所在行和位置 + * @param {String} selection 编辑器选中的文本 + */ + "line-break": function (cm, icon, cursor, selection) { + // 如果当前没有选中的文本，将光标移到要输入的位置 + if (selection === "") { + cm.setCursor(cursor.line, cursor.ch + 1) + } + cm.replaceSelection("
"); + } + }, toolbarCustomIcons: { testIcon: "
", testIcon1: "
", @@ -152,14 +148,11 @@ function create_editorMD(id, width, high, placeholder, imageUrl, callback, initV imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"], imageUploadURL: imageUrl,//url onchange: onchange, - onload: function() { + onload: function () { let _id = this.id // 如果要使用this，这里不能使用箭头函数 let _editorName = this; let react_id = `react_${_editorName.id}`; const __that = window[react_id] - - // this.previewing(); - // let _id = id; $("#" + _id + " [type=\"latex\"]").bind("click", function () { _editorName.cm.replaceSelection("```latex"); _editorName.cm.replaceSelection("\n"); @@ -180,19 +173,12 @@ function create_editorMD(id, width, high, placeholder, imageUrl, callback, initV if (__that.props.showNullButton) { const NULL_CH = '▁' - // const NULL_CH = '〇' - // const NULL_CH = '🈳' - $("#" + _id + " [type=\"nullBtton\"]").bind("click", function () { _editorName.cm.replaceSelection(NULL_CH); - // var __Cursor = _editorName.cm.getDoc().getCursor(); - // _editorName.cm.setCursor(__Cursor.line - 1, 0); }); } - if (noStorage == true) { - - } else { + if (!noStorage == true) { md_elocalStorage(_editorName, `MDEditor__${_id}`, _id); } @@ -216,11 +202,11 @@ export default class TPMMDEditor extends Component { // this.answers_editormd.setValue(this.props.initValue) // } } - + // react_mdEditor_ componentDidMount = () => { - const { mdID, initValue, placeholder, showNullButton} = this.props; - + const { mdID, initValue, placeholder, showNullButton } = this.props; + let _id = `mdEditor_${mdID}` this.contentChanged = false; const _placeholder = placeholder || ""; @@ -235,7 +221,7 @@ export default class TPMMDEditor extends Component { const __editorName = _editorName; react_id = `react_${__editorName.id}`; const that = window[react_id] - + // 一个延迟的recreate或resize，不加这段代码，md初始化可能会出现样式问题 setTimeout(() => { if (that.props.needRecreate == true) { @@ -256,33 +242,33 @@ export default class TPMMDEditor extends Component { __editorName.setValue(that.state.initValue) } } - + __editorName.cm.on("change", (_cm, changeObj) => { that.contentChanged = true; if (that.state.showError) { - that.setState({showError: false}) + that.setState({ showError: false }) } that.onEditorChange() }) that.props.onCMBlur && __editorName.cm.on('blur', () => { that.props.onCMBlur() }) - that.props.onCMBeforeChange && __editorName.cm.on('beforeChange', (cm,change) => { - that.props.onCMBeforeChange(cm,change) + that.props.onCMBeforeChange && __editorName.cm.on('beforeChange', (cm, change) => { + that.props.onCMBeforeChange(cm, change) }) that.answers_editormd = __editorName; // 这里应该可以去掉了，方便调试加的 - window[__editorName.id+'_'] = __editorName; - }, initValue, this.onEditorChange,this.props.watch, { + window[__editorName.id + '_'] = __editorName; + }, initValue, this.onEditorChange, this.props.watch, { noStorage: this.props.noStorage, showNullButton: this.props.showNullButton, emoji: this.props.emoji }, this); - + } // 用在form里时，validate失败时出现一个红色边框 showError = () => { - this.setState({showError: true}) + this.setState({ showError: true }) } onEditorChange = () => { if (!this.answers_editormd) return; @@ -290,7 +276,7 @@ export default class TPMMDEditor extends Component { //console.log('onEditorChange', this.props.id, val) try { this.props.onChange && this.props.onChange(val) - } catch(e) { + } catch (e) { // http://localhost:3007/courses/1309/common_homeworks/6566/setting // 从这个页面，跳转到编辑页面，再在编辑页面点击返回的时候，这里会报错 console.error('出错') @@ -322,7 +308,7 @@ export default class TPMMDEditor extends Component { this.setState({ initValue: val }) } } - + render() { let { @@ -335,10 +321,10 @@ export default class TPMMDEditor extends Component { } return ( -
- {/* padding10-20 */} -
- +
+ {/* padding10-20 */} +
+