Nigel
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

at谁列表

This commit is contained in:
谢思 2021-10-18 14:19:32 +08:00
parent 4add266047
commit e3f49db5c0
2 changed files with 57 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/tpm/challengesnew/css/newquestion.css
View File

@ -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;
}

65
src/modules/tpm/challengesnew/tpm-md-editor.js
View File

@ -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 = (
<div className="at_who_list">
// <Menu className="at_who_list" id="at_who_list">
// {users && users.map((item,key)=>{
// return(
// <Menu.item>
// { item.image_url && <img src={getImageUrl(item.image_url)}></img> }
// <span>{item.username}</span>
// </Menu.item>
// )
// })}
// </Menu>
<div className="at_who_list" id="at_who_list" onkeydown ={(e)=>{handleKeyDown(e)}}>
{users && users.map((item,key)=>{
return(
<div key={key} className="at_who" onClick={()=>{selectAtWho(item.username)}}>
@ -131,7 +172,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
})}
</div>
)
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 (
<Fragment>
<div ref={editorEl} className={`df ${className} ${imageExpand && 'editormd-image-click-expand'} `} >
<div ref={editorEl} className={`df ${className} ${imageExpand && 'editormd-image-click-expand'} `}>
<div className={`edu-back-greyf5 radius4 editormd ${error ? 'error' : ''}`} id={containerId} >
<textarea style={{ display: 'none' }} id={editorBodyId} name="content"></textarea>
<div className="CodeMirror cm-s-defualt"></div>
{atWhoVisible && atWhoList}
{/* {atWhoList} */}
<div className="CodeMirror cm-s-defualt"></div>
</div>
</div>
{showResizeBar ? <a ref={resizeBarEl} className='editor-resize'></a> : null}