diff --git a/src/modules/tpm/challengesnew/css/newquestion.css b/src/modules/tpm/challengesnew/css/newquestion.css index 444ca8d16..e0ac5defa 100644 --- a/src/modules/tpm/challengesnew/css/newquestion.css +++ b/src/modules/tpm/challengesnew/css/newquestion.css @@ -4,4 +4,13 @@ .Permanentban{ color:#5091FF !important; border-color: #5091FF !important; +} + +/*md编辑器中输入@弹出可选人列表样式*/ +.at_who_list{ + position: absolute; + top: 100px; + left: 100px; + background-color: red; + z-index: 99; } \ No newline at end of file diff --git a/src/modules/tpm/challengesnew/tpm-md-editor.js b/src/modules/tpm/challengesnew/tpm-md-editor.js index c074d3dc6..dfe4e7b12 100644 --- a/src/modules/tpm/challengesnew/tpm-md-editor.js +++ b/src/modules/tpm/challengesnew/tpm-md-editor.js @@ -6,6 +6,7 @@ import ResizeObserver from 'resize-observer-polyfill'; import '../../courses/css/Courses.css'; import './css/TPMchallengesnew.css'; import 'codemirror/lib/codemirror.css'; +import './css/newquestion.css'; import { AutoComplete } from 'antd'; const $ = window.$ @@ -75,12 +76,20 @@ function md_elocalStorage(editor, mdu, id) { return tid } +const atWhoList = ( +
aaa
+) + +const users = [{image_url: "system/lets/letter_avatars/2/J/241_157_191/120.png",login: "jasonjun",profile_completed: false,user_id: 84965,username: "jasonjun"}, +{image_url: "system/lets/letter_avatars/2/E/122_185_146/120.png",login: "Eo9ygbqns",profile_completed: false,user_id: 84963,username: "Eo9ygbqns"}, +{image_url: "system/lets/letter_avatars/2/P/238_117_19/120.png",login: "postwoman",profile_completed: true,user_id: 84961,username: "PostWoman"}] 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 , forMember = true }) => { const editorEl = useRef(); const resizeBarEl = useRef(); const [editorInstance, setEditorInstance] = useState(); + const [atWhoVisible, setAtWhoVisible] = useState(false); const containerId = `mdEditor_${mdID}`; const editorBodyId = `mdEditors_${mdID}`; const tipId = `e_tips_mdEditor_${mdID}`; @@ -201,18 +210,16 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla } if (onChange) { editorInstance.cm.on('change', (cm) => { - $(`#editorBodyId`).atwho({ - at: '@', - data:['111','222'] - }) - // if(forMember){ - // document.onkeydown = (e) => { - // if (e.key === "@") { - // // 输入@键后在对应的位置显示可选的项目成员 - - // } - // }; - // } + if(forMember){ + document.onkeydown = (e) => { + if (e.key.charCodeAt() === 80 || e.key.charCodeAt() === 64) { + // 输入@键后在对应的位置显示可选的项目成员 + setAtWhoVisible(true); + }else{ + setAtWhoVisible(false); + } + }; + } onChange(cm.getValue()) }) } @@ -230,10 +237,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla useEffect(() => { if (editorInstance && initValue !== undefined) { - $(`#editorBodyId`).atwho({ - at: '@', - data:['111','222'] - }) + const val = editorInstance.getValue(); if (initValue !== null && initValue !== editorInstance.getValue()) { editorInstance.setValue(initValue.toString()) @@ -283,7 +287,8 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
- + + {atWhoVisible && atWhoList}