diff --git a/src/modules/tpm/challengesnew/css/newquestion.css b/src/modules/tpm/challengesnew/css/newquestion.css index 46bb22c30..133535474 100644 --- a/src/modules/tpm/challengesnew/css/newquestion.css +++ b/src/modules/tpm/challengesnew/css/newquestion.css @@ -15,8 +15,6 @@ background: #FFFFFF; box-shadow: 0px 4px 8px 2px rgba(212, 212, 212, 0.5); border-radius: 4px; - top: 60px; - left: 100px; overflow-y: scroll; cursor: pointer; } diff --git a/src/modules/tpm/challengesnew/tpm-md-editor.js b/src/modules/tpm/challengesnew/tpm-md-editor.js index eae4f23e4..f3455fe40 100644 --- a/src/modules/tpm/challengesnew/tpm-md-editor.js +++ b/src/modules/tpm/challengesnew/tpm-md-editor.js @@ -117,10 +117,51 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla cm.replaceRange(username+" ",{line,ch},{line,ch}); } - console.log('window.event',window.event); - + // useEffect (()=>{ + // //监听上下键和enter键 选中atwo + // atWhoVisible && document.onkeydown((e)=>{ + // //上 + // if(e.key === "ArrowUp"){ + // console.log('上'); + // } + // //下 + // if(e.key === "ArrowDown"){ + // console.log('下'); + // } + // //enter + // if(e.key === "Enter"){ + // console.log('Enter'); + // } + // }) + // },[]) + + // function handleKeyDown(e){ + // //上 + // if(e.key === "ArrowUp"){ + // console.log('上'); + // } + // //下 + // if(e.key === "ArrowDown"){ + // console.log('下'); + // } + // //enter + // if(e.key === "Enter"){ + // console.log('Enter'); + // } + // } + const atWhoList = ( -
+ // + // {users && users.map((item,key)=>{ + // return( + // + // { item.image_url && } + // {item.username} + // + // ) + // })} + // +
{handleKeyDown(e)}}> {users && users.map((item,key)=>{ return(
{selectAtWho(item.username)}}> @@ -131,7 +172,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla })}
) - + useEffect(()=>{ document.addEventListener('click',()=>{setAtWhoVisible(false)}); }) @@ -234,18 +275,27 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla tid = md_elocalStorage(editorInstance, `MDEditor__${containerId}`, containerId) } //当光标或选中内容时触发绑定@事件 - editorInstance.cm.on("cursorActivity", () => { + editorInstance.cm.on("focus", () => { if (forMember) { document.onkeydown = (e) => { + // console.log('e',e); if (e.key === "@") { // 输入@键后在对应的位置显示可选的项目成员 setAtWhoVisible(true); + //获取光标位置 + const cssStyle = document.getElementsByClassName("CodeMirror cm-s-default CodeMirror-wrap")[0].firstChild.style; + //设置弹框位置 + document.getElementById("at_who_list").style.top = (parseInt(cssStyle.getPropertyValue("top").replace("px",""))+60)+"px"; + document.getElementById("at_who_list").style.left = (parseInt(cssStyle.getPropertyValue("left").replace("px",""))+20)+"px"; } else { setAtWhoVisible(false); } }; } }); + editorInstance.cm.on("blur", () => { + document.onkeydown = null ; + }); editorInstance.cm.on("change", (cm) => { onChange && onChange(cm.getValue()); }); @@ -309,15 +359,14 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla }, [ editorInstance, resizeBarEl ]) - return ( -
+
+
{atWhoVisible && atWhoList} {/* {atWhoList} */} -
{showResizeBar ? : null}