m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'dev_aliyun' of http://bdgit.educoder.net/Hjqreturn/educoder into dev_aliyun

Browse Source
video_log
cxt 5 years ago
parent ad447bb3ab 1b4c340a9a
commit f0c1bc0189
1 changed files with 77 additions and 91 deletions
Show Stats Download Patch File Download Diff File

148
public/react/src/modules/tpm/challengesnew/TPMMDEditor.js
Unescape View File

@ -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 = '您上次有已保存的数据，是否<a style="cursor: pointer;" class="link-color-blue" onclick="md_rec_data(\'content\',\''+ mdu + '\',\'' + id + '\')">恢复</a> ? / <a style="cursor: pointer;" class="link-color-blue" onclick="md_clear_data(\'content\',\''+ mdu + '\',\'' + id + '\')">不恢复</a>';
$("#e_tips_"+id).html(h);
}
setInterval(function() {
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 = '您上次有已保存的数据，是否<a style="cursor: pointer;" class="link-color-blue" onclick="md_rec_data(\'content\',\'' + mdu + '\',\'' + id + '\')">恢复</a> ? / <a style="cursor: pointer;" class="link-color-blue" onclick="md_clear_data(\'content\',\'' + mdu + '\',\'' + id + '\')">不恢复</a>';
$("#e_tips_" + id).html(h);
}
setInterval(function () {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
@ -76,26 +58,26 @@ 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.无法开启自动保存草稿服务,请升级浏览器！');
}
}
@ -106,16 +88,16 @@ function create_editorMD(id, width, high, placeholder, imageUrl, callback, initV
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("<br/>");
}
},
toolbarCustomIcons: {
testIcon: "<a type=\"inline\" class=\"latex\" ><div class='zbg'></div></a>",
testIcon1: "<a type=\"latex\" class=\"latex\" ><div class='zbg_latex'></div></a>",
@ -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);
}
@ -219,7 +205,7 @@ export default class TPMMDEditor extends Component {
// react_mdEditor_
componentDidMount = () => {
const { mdID, initValue, placeholder, showNullButton} = this.props;
const { mdID, initValue, placeholder, showNullButton } = this.props;
let _id = `mdEditor_${mdID}`
this.contentChanged = false;
@ -260,20 +246,20 @@ export default class TPMMDEditor extends Component {
__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
@ -282,7 +268,7 @@ export default class TPMMDEditor extends Component {
}
// 用在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('出错')
@ -335,10 +321,10 @@ export default class TPMMDEditor extends Component {
}
return (
<React.Fragment>
<div className={`df ${className} ${imageExpand && 'editormd-image-click-expand' }`} >
<div className={`df ${className} ${imageExpand && 'editormd-image-click-expand'}`} >
{/* padding10-20 */}
<div className="edu-back-greyf5 radius4" id={`mdEditor_${mdID}`} style={{..._style}}>
<textarea style={{display: 'none'}} id={`mdEditors_${mdID}`} name="content"></textarea>
<div className="edu-back-greyf5 radius4" id={`mdEditor_${mdID}`} style={{ ..._style }}>
<textarea style={{ display: 'none' }} id={`mdEditors_${mdID}`} name="content"></textarea>
<div className="CodeMirror cm-s-defualt">
</div>
</div>

Write Preview
Loading…
Cancel
Save