@who列表
This commit is contained in:
parent
85ef26f70e
commit
7e69c64c9c
|
@ -9,8 +9,26 @@
|
|||
/*md编辑器中输入@弹出可选人列表样式*/
|
||||
.at_who_list{
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 180px;
|
||||
max-height: 160px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 8px 2px rgba(212, 212, 212, 0.5);
|
||||
border-radius: 4px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background-color: red;
|
||||
z-index: 99;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.at_who{
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(212, 212, 212, 0.5);
|
||||
}
|
||||
.at_who img{
|
||||
width:30px;
|
||||
height:30px;
|
||||
border-radius:50%;
|
||||
margin-right: 10px;
|
||||
}
|
|
@ -1,13 +1,11 @@
|
|||
|
||||
import React, { Fragment, useEffect, useRef, useState } from 'react';
|
||||
import { getUploadActionUrl, getUrl } from 'educoder';
|
||||
import ResizeObserver from 'resize-observer-polyfill';
|
||||
|
||||
import { getImageUrl } from 'educoder';
|
||||
import '../../courses/css/Courses.css';
|
||||
import './css/TPMchallengesnew.css';
|
||||
import 'codemirror/lib/codemirror.css';
|
||||
import './css/newquestion.css';
|
||||
import { AutoComplete } from 'antd';
|
||||
const $ = window.$
|
||||
|
||||
const mdIcons = ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "link", "|", "inline-latex", "latex", '|', "image", "table", '|', "line-break", "watch", "clear"];
|
||||
|
@ -41,7 +39,6 @@ function md_rec_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()) {
|
||||
|
@ -76,14 +73,6 @@ 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();
|
||||
|
@ -93,6 +82,12 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
|
|||
const containerId = `mdEditor_${mdID}`;
|
||||
const editorBodyId = `mdEditors_${mdID}`;
|
||||
const tipId = `e_tips_mdEditor_${mdID}`;
|
||||
|
||||
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"},
|
||||
{image_url: "system/lets/letter_avatars/2/X/70_163_90/120.png",login: "Es5ghtfik",profile_completed: false,user_id: 89516,username: "徐准"},
|
||||
{image_url: "system/lets/letter_avatars/2/X/70_163_90/120.png",login: "Es5ghtfik",profile_completed: false,user_id: 89516,username: "徐准1"}]
|
||||
|
||||
function onLayout() {
|
||||
let ro;
|
||||
|
@ -111,6 +106,19 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
|
|||
return ro;
|
||||
}
|
||||
|
||||
const atWhoList = (
|
||||
<div className="at_who_list">
|
||||
{users && users.map((item,key)=>{
|
||||
return(
|
||||
<div className="at_who">
|
||||
{ item.image_url && <img src={getImageUrl(item.image_url)}></img> }
|
||||
<span>{item.username}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (editorInstance) {
|
||||
return
|
||||
|
@ -288,7 +296,8 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
|
|||
<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>
|
||||
{atWhoVisible && atWhoList}
|
||||
{/* {atWhoVisible && atWhoList} */}
|
||||
{atWhoList}
|
||||
<div className="CodeMirror cm-s-defualt"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue