This commit is contained in:
谢思 2021-10-13 10:07:38 +08:00
parent 8c7865d2c1
commit 85ef26f70e
2 changed files with 31 additions and 17 deletions

View File

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

View File

@ -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 = (
<div className="at_who_list">aaa</div>
)
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
<Fragment>
<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"><AutoComplete></AutoComplete></textarea>
<textarea style={{ display: 'none' }} id={editorBodyId} name="content"></textarea>
{atWhoVisible && atWhoList}
<div className="CodeMirror cm-s-defualt"></div>
</div>
</div>