+ {users && users.map((item,key)=>{
+ return(
+
+ )
+
useEffect(() => {
if (editorInstance) {
return
@@ -121,8 +347,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
htmlDecode: "style,script,iframe",
sequenceDiagram: true,
autoFocus: false,
- watch: watch === undefined ? true : watch,
-
+ watch: watch,
saveHTMLToTextarea: true,
dialogMaskOpacity: 0.6,
placeholder: placeholder,
@@ -134,6 +359,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
},
toolbarIconsClass: {
"line-break": "fa-minus",
+ "fullScreen":"iconfont icon-fangdaicon font-14"
},
toolbarCustomIcons: {
"inline-latex": "",
@@ -150,6 +376,9 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
}
cm.replaceSelection(NULL_CH)
},
+ "fullScreen":function(cm,icon,cursor,selection){
+ icon.addClass("none");
+ },
"inline-latex": function (cm, icon, cursor, selection) {
cm.replaceSelection("$$" + selection + "$$");
cm.setCursor(cursor.line, cursor.ch + 2);
@@ -164,7 +393,8 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
lang: {
toolbar: {
"latex": "多行公式",
- "line-break": "换行"
+ "line-break": "换行",
+ "fullScreen":"开启全屏"
}
},
onload: function () {
@@ -172,15 +402,78 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
}
})
-
}, [containerId, editorInstance, startInit])
const cmEl = editorInstance && editorInstance.cm
+ useEffect(()=>{
+ if(atWhoVisibleRef.current){
+ // 添加上下键、enter键监听事件
+ cmEl.addKeyMap({
+ 'Up':()=>{
+ const atWhoListDiv = document.getElementById("at_who_list");
+ const atWhoDivs = document.getElementsByClassName("at_who");
+ let index;
+ for(let i = 0; i{selectAtWho(item.username)}} onMouseOver={()=>{onMouseOver(key)}}>
+ {item.image_url && })
}
+ {item.username}
+
+ )
+ })}
+
+ {atWhoVisible && atWhoList}
+
+ {quoteVisible && QuoteDiv }
") + }, + "null-button": function (cm, icon, cursor, selection) { + if (selection === "") { + cm.setCursor(cursor.line, cursor.ch + 1) + } + cm.replaceSelection(NULL_CH) + }, + "inline-latex": function (cm, icon, cursor, selection) { + cm.replaceSelection("$$" + selection + "$$"); + cm.setCursor(cursor.line, cursor.ch + 2); + cm.focus() + }, + "latex": function (cm, icon, cursor, selection) { + cm.replaceSelection("```latex\n\n" + selection + "```"); + cm.setCursor(cursor.line + 1, 0); + cm.focus() + }, + }, + lang: { + toolbar: { + "latex": "多行公式", + "line-break": "换行" + } + }, + onload: function () { + setEditorInstance(this) + } + }) + + + }, [containerId, editorInstance, startInit]) + + const cmEl = editorInstance && editorInstance.cm + + useEffect(() => { + if (cmEl) { + let tid = null + let ro + if (onCMBlur) { + editorInstance.cm.on('blur', () => { onCMBlur(editorInstance.getValue()) }) + } + if (onCMBeforeChange) { + editorInstance.cm.on('beforeChange', (cm, change) => { + onCMBeforeChange(cm, change) + }) + } + if (!noStorage) { + tid = md_elocalStorage(editorInstance, `MDEditor__${containerId}`, containerId) + } + if (onChange) { + editorInstance.cm.on('change', (cm) => { + let v = xss(cm.getValue()); + onChange(v); + }) + } + ro = onLayout() + return () => { + if (!noStorage) { + clearInterval(tid) + } + if (ro) { + ro.unobserve(editorEl.current) + } + } + } + }, [cmEl]) + + useEffect(() => { + if (editorInstance && initValue !== undefined) { + if (initValue != null && initValue != editorInstance.getValue()) { + editorInstance.setValue(initValue.toString()) + } + } + }, [editorInstance, initValue, containerId]) + + useEffect(() => { + if (resizeBarEl.current) { + let el = resizeBarEl.current + let dragging = false + let startY = 0 + function onMouseDown(e) { + dragging = true + startY = e.pageY + } + function onMouseUp() { + dragging = false + } + function onMouseMove(e) { + if (dragging) { + let delta = e.pageY - startY + if (delta < 0) { + delta = 0 + } + if (delta > 300) { + delta = 300 + } + let resizeH = height + delta + 'px' + editorInstance.resize('', resizeH) + } + } + el.addEventListener('mousedown', onMouseDown) + document.addEventListener('mousemove', onMouseMove) + document.addEventListener('mouseup', onMouseUp) + return () => { + el.removeEventListener('mousedown', onMouseDown) + document.removeEventListener('mousemove', onMouseMove) + document.removeEventListener('mouseup', onMouseUp) + } + } + }, [ + editorInstance, resizeBarEl + ]) + + return ( +
+
+ )
+}
\ No newline at end of file
@@ -266,7 +774,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
{showResizeBar ? : null}
- {noStorage == true ? null : }
+ {noStorage === true ? null : }
)
diff --git a/src/modules/tpm/challengesnew/tpm-md-editor1.js b/src/modules/tpm/challengesnew/tpm-md-editor1.js
new file mode 100644
index 000000000..157f0e94e
--- /dev/null
+++ b/src/modules/tpm/challengesnew/tpm-md-editor1.js
@@ -0,0 +1,273 @@
+
+import React, { Fragment, useEffect, useRef, useState } from 'react'
+import { getUploadActionUrl, getUrl } from 'educoder'
+import ResizeObserver from 'resize-observer-polyfill';
+import xss from 'xss';
+import '../../courses/css/Courses.css'
+import './css/TPMchallengesnew.css'
+import 'codemirror/lib/codemirror.css'
+const $ = window.$
+
+const mdIcons = ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "link", "|", "inline-latex", "latex", '|', "image", "table", '|', "line-break", "watch", "clear"]
+
+const NULL_CH = '▁'
+
+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') {
+ $(id2).html(" ");
+ } else {
+ $(id1).html(" ");
+ }
+}
+
+window.md_clear_data = md_clear_data
+function md_rec_data(k, mdu, id) {
+ if (window.sessionStorage.getItem(k + mdu) !== null) {
+ var editor = $("#e_tips_" + id).data('editor');
+ editor.setValue(window.sessionStorage.getItem(k + mdu));
+ // /shixuns/b5hjq9zm/challenges/3977/tab=3 setValue可能导致editor样式问题
+ md_clear_data(k, mdu, id);
+ }
+}
+window.md_rec_data = md_rec_data;
+
+
+function md_elocalStorage(editor, mdu, id) {
+ let oc = window.sessionStorage.getItem('content' + mdu)
+ if (oc !== null && oc != editor.getValue()) {
+ $("#e_tips_" + id).data('editor', editor);
+ let h = '您上次有已保存的数据，是否恢复 ? / 不恢复';
+ $("#e_tips_" + id).html(h)
+ }
+ let tid = setInterval(function () {
+ let d = new Date();
+ let h = d.getHours();
+ let m = d.getMinutes();
+ let s = d.getSeconds();
+ 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());
+ let id2 = "#e_tips_" + id;
+
+ let textStart = " 数据已于 "
+ let text = textStart + h + ':' + m + ':' + s + " 保存 ";
+ // 占位符
+ let oldHtml = $(id2).html();
+ if (oldHtml && oldHtml != ' ' && oldHtml.startsWith(textStart) == false) {
+ $(id2).html(oldHtml.split(' (')[0] + ` (${text})`);
+ } else {
+ $(id2).html(text);
+ }
+ }
+ }, 10000)
+ return tid
+}
+
+
+export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, className = '', noStorage = false, imageExpand = true, placeholder = '', width = '100%', height = 400, initValue = '', emoji, watch, showNullButton = false, showResizeBar = false, startInit = true }) => {
+
+ const editorEl = useRef()
+ const resizeBarEl = useRef()
+ const [editorInstance, setEditorInstance] = useState()
+ const containerId = `mdEditor_${mdID}`
+ const editorBodyId = `mdEditors_${mdID}`
+ const tipId = `e_tips_mdEditor_${mdID}`
+
+ function onLayout() {
+ let ro
+ if (editorEl.current) {
+ ro = new ResizeObserver(entries => {
+ for (let entry of entries) {
+ if (entry.target.offsetHeight > 0 || entry.target.offsetWidth > 0) {
+ editorInstance.resize()
+ editorInstance.cm.refresh()
+ editorInstance.cm.focus()
+ }
+ }
+ })
+ ro.observe(editorEl.current)
+ }
+ return ro
+ }
+
+ useEffect(() => {
+ if (editorInstance) {
+ return
+ }
+ if (!startInit) { return }
+ const editor_instance = window.editormd(containerId, {
+ width,
+ height,
+ path: getUrl("/editormd/lib/"),
+ markdown: initValue,
+ syncScrolling: "single",
+ tex: true,
+ tocm: true,
+ emoji: !!emoji,
+ taskList: true,
+ codeFold: true,
+ searchReplace: true,
+ htmlDecode: "style,script,iframe",
+ sequenceDiagram: true,
+ autoFocus: false,
+ watch: watch === undefined ? true : watch,
+
+ saveHTMLToTextarea: true,
+ dialogMaskOpacity: 0.6,
+ placeholder: placeholder,
+ imageUpload: true,
+ imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
+ imageUploadURL: getUploadActionUrl(),
+ toolbarIcons: function () {
+ return showNullButton ? [...mdIcons, 'null-button'] : mdIcons
+ },
+ toolbarIconsClass: {
+ "line-break": "fa-minus",
+ },
+ toolbarCustomIcons: {
+ "inline-latex": "",
+ "latex": "",
+ "null-button": "点击插入填空项",
+ },
+ toolbarHandlers: {
+ "line-break": function (cm, icon, cursor, selection) {
+ cm.replaceSelection("") + }, + "null-button": function (cm, icon, cursor, selection) { + if (selection === "") { + cm.setCursor(cursor.line, cursor.ch + 1) + } + cm.replaceSelection(NULL_CH) + }, + "inline-latex": function (cm, icon, cursor, selection) { + cm.replaceSelection("$$" + selection + "$$"); + cm.setCursor(cursor.line, cursor.ch + 2); + cm.focus() + }, + "latex": function (cm, icon, cursor, selection) { + cm.replaceSelection("```latex\n\n" + selection + "```"); + cm.setCursor(cursor.line + 1, 0); + cm.focus() + }, + }, + lang: { + toolbar: { + "latex": "多行公式", + "line-break": "换行" + } + }, + onload: function () { + setEditorInstance(this) + } + }) + + + }, [containerId, editorInstance, startInit]) + + const cmEl = editorInstance && editorInstance.cm + + useEffect(() => { + if (cmEl) { + let tid = null + let ro + if (onCMBlur) { + editorInstance.cm.on('blur', () => { onCMBlur(editorInstance.getValue()) }) + } + if (onCMBeforeChange) { + editorInstance.cm.on('beforeChange', (cm, change) => { + onCMBeforeChange(cm, change) + }) + } + if (!noStorage) { + tid = md_elocalStorage(editorInstance, `MDEditor__${containerId}`, containerId) + } + if (onChange) { + editorInstance.cm.on('change', (cm) => { + let v = xss(cm.getValue()); + onChange(v); + }) + } + ro = onLayout() + return () => { + if (!noStorage) { + clearInterval(tid) + } + if (ro) { + ro.unobserve(editorEl.current) + } + } + } + }, [cmEl]) + + useEffect(() => { + if (editorInstance && initValue !== undefined) { + if (initValue != null && initValue != editorInstance.getValue()) { + editorInstance.setValue(initValue.toString()) + } + } + }, [editorInstance, initValue, containerId]) + + useEffect(() => { + if (resizeBarEl.current) { + let el = resizeBarEl.current + let dragging = false + let startY = 0 + function onMouseDown(e) { + dragging = true + startY = e.pageY + } + function onMouseUp() { + dragging = false + } + function onMouseMove(e) { + if (dragging) { + let delta = e.pageY - startY + if (delta < 0) { + delta = 0 + } + if (delta > 300) { + delta = 300 + } + let resizeH = height + delta + 'px' + editorInstance.resize('', resizeH) + } + } + el.addEventListener('mousedown', onMouseDown) + document.addEventListener('mousemove', onMouseMove) + document.addEventListener('mouseup', onMouseUp) + return () => { + el.removeEventListener('mousedown', onMouseDown) + document.removeEventListener('mousemove', onMouseMove) + document.removeEventListener('mouseup', onMouseUp) + } + } + }, [ + editorInstance, resizeBarEl + ]) + + return ( +
+
+ {showResizeBar ? : null}
+
+
+
+
+
+ {noStorage == true ? null : }
+
+