Skip to content
This repository has been archived by the owner on Apr 11, 2022. It is now read-only.

聚焦编辑器,光标聚焦但不要在显示区域内,然后点击弹出 modal hoverbar 显示位置异常。 #400

Open
NgChiKin opened this issue Feb 22, 2022 · 2 comments
Labels
bug Something isn't working

Comments

@NgChiKin
Copy link

NgChiKin commented Feb 22, 2022

bug 描述

聚焦编辑器,光标聚焦但不要在显示区域内,然后点击弹出 modal hoverbar,例如 插入标签。modal hoverbar 的位置显示异常

你预期的样子是?

正常显示位置

系统和浏览器及版本号

都会

wangEditor 版本

v5 最新版本

demo 能否复现该 bug ?


17

给Editor 加上 overflow-y: hidden 后变成了这样, 原本内容消失了,原因是因为显示 modal hoverbar, 但是位置计算不准确
导致原先的内容被 滚动到看不见的位置.
18

最小成本的复现步骤

-步骤一: 去官网 demo, 复制超出显示区域的内容,使其需要滚动。 例如下:
7e8bdzXF4JezQ570_%BS_6&zDhhFZBAWDwaWY8RWcJnaHbW6WdxSG5Di94#!f1HD2YX5tJHxsiP6BWMke&XiBC9FGi9dQH4m@zCaJxNdYewcTxxX9@M%RkHMh8m&Qi@1@#0b4c4bfp39G@!mt$9Gm3iKe@mbEP3y@_E5G2ikk@1G#R##S99fXTmf25TzmmyHZxT9kFXiRS!Znn76%Whn4WHRrxR@HTBCPS5bJ%92T7A2Q$njrarF8$&WnZ9szHh1Q45WxjKCM3Ew&R688xJhP98471!0FSyDYE#19eGEA8&J8#2AYMaTAWhF#H@$%0ZE5H6kEpYR6eW7QB8#QMQY#4HyFkfJyhH5$#rWSdCe4ZfEWZm&982t!tF1@90y6FkTnkha6@sbJZmSC2dM&6EDK4KpKiPE#wZbCf2Dc#4a3TrMTP0Rn2i97J991wnH2kbJb&Bs3WMB2XJe!aT44HyDf9RaKni_t8eC7tih0bTws%an$xN@7XBrHBsYRk$iweiSEM11yJw%KQ2nCm7_!nfm4je4kD#N8FQ#RBhTYrkQKDJNkf6$56CinX@Y_S6_0YyR9%J69tR$#85b9y77Ym7dYbD_66$E74hHEx0z&K31RF8j4fDH4GdYRM0_j4$@bGdD765nA@%&E34J_mf$D$Zhad3aKMFMZ_EM#JFr5w9x8_YBYdnJ0y#AfnaB#j1$n#hS23f#ErG291nEk0%_8tz#_7WRAhFbi8r#PMYiEEybXFX4dmta2fKhC0MZaCkpkQM8aXwA1Nm&@WashtJzz35_hZ5#$n#QB2Wj0&4t0Rbet7rzmz#Pn$jZKC8wQ6!N2AhnJh%wXi1nHSQb1EaQ_5PzBJ2CaN@e4PG7%Jyss6xRa8BBDQ$zX!N0s5_@PhWKQix9kYkZWhXzjz@pdPCEb5z0xd&s7DnPGZMpM5RM0SAY#Y@pG1nphX1H5bjEBdi51XXNxJhee%n1#jzG%SGEN1xD0T#eZwG@nj5cWeMk#12657MpeFjJ7jGnSPA#1iTbiD%a3dXK1K2%7tjfSfaiC_MAHb5R@n9#jz0$XCx2yCays@@r&ZY%@cKCcHJbs51C$tWK@GQaP&A6a6SSK9n$fTp3cH@!pREeZb3QKknJdjeS#Pnn&xm0es0CYk$w6EpSKcKrsbj9mjG5Bke4MKa7XP8M%ZbaNDfxB4irnG_jT7sKT98fYK$6sRnbn6Kd%j23$5TfSp6T4CFjxa9bSbe21i%Q@JmG&EXSbNPd6bEppJG277_6P7G$ACJ9%SCARb%bd!x7inTw!4!syA#sSZ9_K3!sTp9iejHriFWXsiBkPFKhz&QjC%sD_H@$8F&1HnRXJ9phNPT0x8MMpi1pJSAd98KjJ!Hm1JnHP4@GfnDNFBbwXPC2Gd42bPfQ@$!&j_MF!DEa9x%D6hZjBkYEz5Twm4K$NE%2b4kW&sHn0xPSKAzbQErZadWr�m*!ZiRakDJ#nx%s2PMMwdWf0Qzhp6F#TQrN%sbHxhxfNxyX7b2H0F3CthSZihHyNH9d#d*@yQ6pkySxxH9tYHdmsZjHDGme5W1@GSir$bSrNc#WQSK@4NHyi#mJPK!4hYbi2Pb8wT7f%4@CxCWwJ8EkJ@Rdk6msGn3E9GpRwnfHiTikjb59GjZCkFmjEKQjY!$w1iGjz$sKZ&7RyeKGRaa8_PPba_2rpn!DTQSiye7317x7h&k0iNr4mJR2&0S#%ZR_1%$QSHNjtiT8P#$r!tMF8KWAmA$Kxrkcapb2JDZp@5J6#PW3tPS8x6aD@2iFtQsHK8yenRDdhM3w3TKJzwsy6SFQsR%eAJkscA41!BMz7EM2WZzB6!pic8TF1QSeRFN3m62ySPf8ABdx6%$hNYTR@DiRXw5sx!$YpDtKS%QaKGmf_SbQa8&Bf&G8HdRfxXk8xcZDM$F2jtC0cM#WExSmsADyxkTFQ9z@DC#97TE0QH$jc#skE8%!Gn5TdNXEN4tpNNyfF#1eprQ##!hPxnzbfm9yX8niFTR3w7Rw&M0_cZ1c750TaEtAYTK!STjpeZ2YrYtD_7$2f&D@Gb#W__mFXb@Ps9N@2y93@kJzZ$c%!Hbp2wedzRGwA1tZ0%5GGMJHXkMMzCMs281BwtrHwh@JX6X18ECX7xk9zbQGyh@s90aZy4Zt#%zeXK&ECPKd08Fezc6Psy3aePzEm5Q&k9Xm9S7k90Bd4D6bK!xt6W1ybF2#fb$Wt__XfTw#68GiZZ5SC29K!0&8NBpw9miRK&Fwrr6xQ@0ZPGamdc6dWdpNPmn7$j#ah4R81KfxafyHD_7r%n1tx18BXQKjb@d@WQc6ZDnT9#b3!NNE9ZrfzPMX#sk9DZ73e%S%eW$P$TDcwkb53WiW&Gfhbdsj&EdD2_RYPemywdd5#nrwYP8iBd@Ep6SEBNzw2sPYM4#9KJ4y0XyPizJJZC_7JcDs6ZD3c$3XsnFjEYQAdk1FGWXeHHh0Q46Py2Jz9BZabp1NB#bMDEma$Rn_ZESdaT3!bTsm18knP*$dk%H@SS1bnC09YD8*0A9iNfxca5saSx6$YdGaZPf59BRN9pRaf2HEGY$y9b9DKntpX&2CSNF7bB@&iP&kHnQ2RN0KQr5CZ7Ph5_ah1a2HtAM$2Q5td5@236nKr1Sc!CZKSWM53neBXDRiXR710SkERc4smz4!w3amNkFJ&wWs$AMws&@&hAm8TiWad!n3%A2wt#mjc5ehx#4JF!CBQazCtzEP!4a7n2Ax36x6T@Y&i7yHHED5EQ0w5JY1rw6sm7mbyittR%0X27KPKrWH9C_$KdH8AW5E&B@FBE@n$ZmG_pyHijtYwFjHteXXmD7E52$Wt@07TMpdDdrhHAS#w8JTzNKS6TeQs_xa#2FYsAm3r@HthKjXn5D7#2jsDf0@cnw2HTSCn%Wd531Ct%WB9jm$x%Y5kR3cWQi8b_4y!EnBsF7DSY868#k2riceXMsXp@_y4AZNnrM_d9abiheZ%FJGBGJxxMpway@C0nS2KKCw0SJZHRFPN!Wf!chX&Zk_0wGPMX5hzR5nM9Cr7e!!a1KPXHTs#jX$fzpQGFS&31wtPeN6Am1jDtYk7hXcpe&w77D@%6ymj4yDEkG7pr8FpmB7RYGk0EMx%wRm03sX84tc#ME11G1ht!26EkKPyzriPEbEYPNp&xE1kz@Ns1N1fiNTK3xM!xAwmF5wm@8G_6aEeAFCeP8&@bb4zD33!Hr1!B4Q3_TBPt64JZX7p!&6iCSs&cR!hdF%j%GS0bt997WTb%A7dj48b&XMEz_k5WfJhEe%3KST17aPd%KY0w#QR9WP#DCdD#wQ2yBcf0N$M%HC8H7_TNH&yY974W_eB0@bxekxinG!DJRsspfmsGTBfYQd#G@NakQGKd3weM759zBMSZ4tsYJ!AQ3CSatyNa!y%YM6WBwWwizSz@94BfT4K7$%0TG3X2%k#W7a50zPnZYY&t7heDx!cbry8b%&b0a6fQCzCTYWD4iAs_!MdN2A9YFn#SR6zGZnyyw_T3z6k7%yj7J3JYfG7sA%2Sd8kkjjDdi9&C&2KMzSdCj5$XCaQ6fn#iQKz2&1_#R1%W$JT$!nS2$27CDctG%d28sySCYJ25PJ2niTSJm#TRd$CprcWtFk89wAEyFJJnYisHXwpzEF#ReWnR1nD@axae!kzwNHwjNt%&DE3b3J$0C39Qcr&Ajb37BG1kS3y%KWiaTwMr9m6MC_Kyh9i@2!&ApK0NA#ZwB6jJ@RftQ&cS_6hxw3Wm&rWQ6R7N_dC2tX#YD9GRcbpsEZi1ZJ&yWR83Rzh%ihpM8xzx6%zQCpRz_7cHdG8jjNwR#Rimwy!i5hjPHw$h35@AzJpajftK!c##$HA2F43hjaxnZwEPQ9F9caF6kztjYkZQ2DcWwsrFj86iteRb3k_p8!Xjb93T@ErAKXXAPAZ3p45Ys6Yp6dzBdAP9AR4d#eDk0TPhH9FhM!2zF_ja9yce29Q8jF#Y2kWPG64dz&nb16Z0sEs4$Be14yCGkkf_nM7T49hWiEw#KP*Y%P%e!Wh@nxr1sAscFN@A#Bx_pYBbMCbhK6aHQX2T9fke4P%4#@P8k3BpkwshN6GEcws%3b5FeEY7DpB7nrG%_0N0FdGCe&j%rC32zAePN325#EWRZz!!i!AtD@37t3xt389@J!XA@TD$9$9PfREQrpNQr!M4%hzCrZ4tZxY6x0bD1%Gb_nGYN$jQcC@EyT4R%PBNpZN!1w!%Gj30X1mt@sH4EKwAb2wE%XPf$PRxZxH9Hz3&9iDfw$wc2F9QBG&wMPChKBcTN6&0RefGY1tHy!Tp6@f@S99c@QBQSjsWBPkPi!c&Qnj0j43KiJ8c&ZR2D4PnzTaT#BTXFDctW2Y9kfx@DAaBP1Xf1kwtetxEfr39&9k6C8MFizc#JW73paxeB&pbNw0y@Hj21cX9xrAA$Ts@yhpewGekbD!tcj5XH04hXzyhsm!JGp5_bdp%jf45Pz&TF8mMFnX$1039ntmjBfe_Wk2$i&Fmxa_Wd9MD33GS2spZN_fr2B!R#XeiGiHpbd5%1YbkbA71rzhhNPy0_x17ZN88r9XK2YzE%f4Y75zdABQJS6haxHrERsKT4pmb5rTtkT$Y9pKQbT9N2C7AW%mmJ8!GKSs@WRhd0@KYf5DhJssZWnK@1Z@xennS0B3BpeA4#s&x#s&&rkn8bJt1jM#Eaxwc@FTsPbnRK3!SK1J6tFG5kxMm0E4SNEXb9s39%eC_AzQF3&2kw%kfwPc6W9kPc$cP67H9ChGzKQCiQbfXp&rN0Ki5ZZ%f3zZyk0_jQzT2drs@!yaZd!xf9NbX_fMZapGES&r%FhT37kyBXKrEkNtnTS4wbf0sTPH!5FD4YDdhcd57HQHW4TGiCB5jn@eeeMkN@4MZKkP*kH89#*RErmeNN6ycXSfSX62nMfhh&cd4eQyGR&eyK1RRRK5J!Qb59Qe%m7ps%%Bj06mBHHZAd$aCSW14QmxEX&pZR20cBn1WNESx6%cxxHkyYeDRwQ9p7%$AjQT6@DfKBhxMFr8mf_iPMrAh4tpREH1SQ1$&xX#ef3xSyr33iyK2eS32iBKAEMbXD#EMTinT_Pj3n0awze!EQYBbK73G%CXJfhyKcR_hrzNfhe1TwmNSsF2mjSz3wAiKRtrG2hdKnA5#nWpR8fmcenNjGWzK79aakEQt!C2s4mxmws1T9aS5b$02c2xecxc4KD!xXeh1a6Q28SDwSwA_A7f!beP&bf$%@ND91!T%F6atEadh9fc5ZMS&$%pX4MyhR!H7QtbMyDMKk@C8kPiiYD!&s@MWx2%5xa%ZBDA7727mH6#nAmc&cKXN9ifSzFD4%yHpbG@cm2k6Rmyn$k$ety%7FZ95NZfyHfQN0bzwa3@jJnN7med!YF@DK2MTsr%z3_1kZa5yGW4mC1A9y8jZ&CHPY@PRY$K7N6N!dynsA81Q92KQ&AyD%hWfyf2PM%cMPfc_MWcstb20bNY#dY$MNnMyezBhmQjmffHnjZAf&D4ky0Zaa&kQ!Cj7YDt!@RJbbEW%D6PXY#!tZ9@#RSm6DkzBdc9aFkf!2%T@a3&Y2DJ1@93cYKwRAZGxEEpzP8_xcbfX#dCFx7i!z0rR5jD3ZdnP&##hDEGNDEtdc&Pk03rc@p2_Ek3nJf2zGcG05wyff1e3NCjBRK!ZpC0ycdPeY%9K4@Ehs_fZ@!WsP34MCpEnXnDRpi!BaTp6zTt0m#%2J570Mp@A$hAWQK!4i3KwcZ#tCcxkQz6ikw5smcQZXm58_pJ&cyRHZ5yNQKt4hpKMCJ9MS%P0pt64Kmi0dSK9xabxtfFd%1a61Z978@@yha@430JE59epZ$Kynd$03D5tzdrXD9H1QYrhwm6BW0P&0wJhpz12_cZtt@!HeA_ByRa0b@Awp&RE2zhSYr%JP8ridhHeryG1Nt1%teNpp_bSmXke$dWy%er&Ch3ET63RGaHWkyWie9FP$37Ri_F@&S25YNcF$Qr9T$w8CcfBm%W7ah$mYmDB8MP50nY0PX0PZ7@bpbc1cbpx0Sen53QeyzzSeZnE!WiSHpj355W6EDJ$%7K0QrQWmxtkD%CW16AhdEpbZ8r$MiwF984y@sP!c2@yA95_6#8A9mB%h0!&R3GX*$x40Sp@BYTmZ4SWSAa8%BpE1k08w6JXiaMa#BC_GN1t$X1arQzQ5jmEmrBiHQ1%WG#PT%9w4TJb7EW0ZphktHrQTyY7h1GF!Q2cR@rYbr96Qh0cbYTZwSmXEAy1QwQ1tjF28QcShhx6Y$574GfrsMNadEDDPxx9d547Grd1i7T5FKTZxwiHs4P6Ycsw#ndNRA8DM9Yhf2S5pDp0M%%5RQK0a37JtEx#Kyw_2Cy96rX#QM7jsacfr9reBZkRQk5A5Nx&FFysJh@S54YcHe2iZMB0k71WEXXyJ*#C!4tT3RRAkz6nD%5tX7Z5&wi9%PXay74_JePpe%@36N9C$4WYw&AGa2ab3NAttQJnmfBkwBwjJm16C&BnjsKdBNzDAFkDwzKTpZnDy!8rFSe_YBRQ#Ahpy19H9t403Rs7NHprnFr!F_d_B#dbJA5R8wQ3xr60#$3ctHACfjj3b2SY9nGw!Z_5#@JQSC_NK%XWc8cWA7##0_Z__6Y0kSXAzsjyNN0Jxd%NXbBbb9fM@pwdW3CP#$W91YRRdj1Z3QGaw$e@S2MMBe$wnc91wyX7hk6#hZP$XzwWKQ$jPaGKbdK5xhFBEiyXi!s58cs54AyCNQNj_K2&E8T6DtNmXnMt7temQtBJcZ5z4#E&NQY_4AR_K3cB657n_D2rtM@af7D4ND0e_JXGh*@H0mh0iFy&mfz@mQWrHcEEM!ment$9sRXr4%Qc7@zbGBR@caX3&569eS4AbKzSKtR4EwneEnH&7MDNh&pMXjr0!1ArGm2BThW04SNs0hNrixpBdrcsdB0GCwGYK%9KbfHjdt&KCkwfY5wfacdPebj1TrtapEBk2!wJs3S#zJQa_XF95Sr7rt@bnFYN6CfHEEpEWASzKN@6J2MZ4aAD_Dr#TMha@kCnFdaXJC43H_Fzwmk3jG0en7stkaTwXn9%mZwzK8NcYpnFY482$f0y8NGGtyEXkm7mejtc7Qt66MzKAJTHs7pjiMGiTk_jGPbJfG7h%stXGj1ehKa0!HYZZtyka$x3nj6@&AiFXr8NwQPMWrdyE&mGQ3Km%16ZeW82wj7_tmh%NRfFy61CXRXe!w%rtDDc_0HhxPKF8wN0xM2k#24!Xmctx%KjWh5dd6_%GQppY6b_@2@e_ZCB!Q8%0e7zn@FXhbJpx9kKm_k05ptw@n0@T1Bk9JWfWpsC48d5Tk2T9btfQ@E%fhpBRiESW_fw7f6YiYmPC#JhAjFBcEGh6hs!37tmdj54b6yW%QSP9_3irxp!G3f0@bpTcD4jWdrzpnR$0WTHBwhDXE&f8N7xbExzeF5kdk78m9XEKrajGd9yH9J$hfH!cCP&jJcsJP&Ay388DsYb74NTxWFM8PCQixXj3Jmh6T3Z9iw7fd@9Tw#mkD%K#AwxCkady%%2GBH70a0kKfT#d8Grsy!JhT1zRhKEGNPSBi#esnpJFDKWFGR%K9ZnteEJGs_!ZjWFZcC9iyD&@FHmQ8MC8Rm5@sdC*$Y%YnxSB5H$26tJip$xrxDaA_R&ikAjwWbD8X9NCH73Cf4ahSm8mT1Xj42$9!DPsJTmXGB@kjZQGDiep&4w2Cz$eJeiQ5$x6MQWaCWb65WWi7z**n7_6E8Hi9649E90TkmTir8rm!iF_s5%WP80khfF0ZWzDWmn0fxkYkNyT0ZDh0rw$p2s5XA2B5Z7CA7xwm%yhPD7mpenZW!H@40510GF0BCYS5Cy&sh6680QYAdKBitaDa!$fxhdsspT7hFQRz7R!aX3ekZ9P27bmrH8_ywpTAknc5%PnRz2@p5A_m90Y#rbp68_Q&KWyWMnxxAWnYEHN76XTz&76ajfpZ&Ts#%HzC#CYbw3#sTGmi2Cjs5!#yxd%DJpCz%E&MP$2pd%aPGz_A&Wp%bKTMHJW1#$T!MfFkQN@ynbnyRSRKP3J2&Fd2!dc0AK#QBnGy$n3T0CX#M5&sZDM9Xm_@HBm4p#N0MPBGQ@6J1C#@br#iAc$EjGQD&!PK&C7QRtCYX10PcdNfEi0fsb_2fnSwy_G%CH3KxJ1b9ZJrDSxRBiAM88cYFy!f55!cSh20%NZ$PpXm%%@wdFDtm205a%@sm1$GZ!%yWr&j_pM%0t3eX14mi5AYaw#SY53WcwXnHk_8DzeR89XQBJhnB#6SdZZSs&TSnt$$baye4ssWGKW3eRAK$wmW&crpdwPW4%pKZJH!39!k#QwnkC$ax6R5%JwXfaPnhb2&7S2nensa&Sr%a%y5ZitQBA426kEEdQnSmdZ0e#EaRWCrbk4hmPsx8xizrWx_SB3FZ#@iy4aa4Ax&p&SH@@jdMkeSQ1Qa3PGMp0z4fs9hGM6&pJs#P%@AyK605wDzNKfBmPxypyPc$m3Gt&h$3s5_k3Nw#wXhihD@wK&rQiwTc@$k&6hZFsSB3XC85bEmbw%sXM_GsnyM0nM0A#s!!KZYAaaRr%QQXM9AsQ68$j6B!Fi_!8y8#M5T%8Z6W$DGbh_AayFAAhDiXQ#pcESr3DX7J@&3jW9Z2ee#6G5eFe2_p96TAZH8eF9dHkfCKGQx86J!994E3Wi&8CChY3PxKWiQFHs6p__5##pKRcttwxr0#p!3mpZ41AD$%1w#WXMCbEHkhTTKwTzMfSjws2DSQG$TyQY$pY1x7p7$z%&tTiwtE4mzaaK&G1TCmd7!XMW2da8R!e0kME_&Cs9SPt0Kb&nk152NwQ&ScdBp&AP%JX2_J%c!%h#9BRdsQZ0*nc4GjwPD!!29D_n8j9!36d$kKM9Eeh@s@4GQa@CkYmsxP750y%t_dGsb1zr!Me@kiM#s4AM@BtFmMHAt_FHGK0P$kjGA_m#cET!yNQB2xCJa1kMwQBs#Q6NRQM$eAtrtm3Z#d7KD6%15j26ZxGGW7Sb2jfr&caSSKQXDXrEZ_3xAECEHYrZy7y3air0pNm2wJt0Y4@pbd@2ax_Ny9!#c1i14Jk7mTMtQRiHpHJQGS%Jsy@rCHP@cCwGa$mpyY7SHXkMM_Y4mhNmPN_WJP42M@ZfB1!i%3dd%cbna2X5XeR9QET44nTC3#M2E&a3yaaQ9KRQ7F1fKyahPG3@j#KhRHiy!shhw#FRHS4b$Kc&4Kb!m@Dt7MR!Yya4Gt4p242tsn%GfQTyFxG6p!z%R8MXe0HjhrSpp&wt8d87FCH#1hcRSXJn69#FpdGptBhKp_faa*TtH1TnBn2n6G818D_i7@%tdYnSs3!fFjnffF#&#z@f1hyy8fKQaYmDYEHDY96N_NEXCN%B3EE!pRnsW$sH68hMWkHZC2yms_mfWCy!&t4s9WZ*X!b2HDdEmwi_4DTX8fHSBM@Qiw3RhN2e2xa&BZ47S3&h7r9mMbYsSfA27w@YfGy6p3wk6NGANZETtRs1wW

  • 步骤二 聚集光标到最后, 然后滚动内容到最上,这时候看不到光标
  • 步骤三 点击插入链接,就能看的 modal hoverbar 位置显示异常。
@wangfupeng1988 wangfupeng1988 added the bug Something isn't working label Feb 22, 2022
@wangfupeng1988
Copy link
Contributor

先加 oveflow: hidden 用着吧,如下图。问题我会继续排查。

image

@NgChiKin
Copy link
Author

@wangfupeng1988 加了 overflow-y: hidden 后出现我 贴的 第二张 gif 那里,文字都会滚动到不可视内容了。

修正定位的问题吧,modal 定位的 bottom 值 理论来说不应该出现负值啊,还有为什么不考虑下边界是有什么 考虑吗?
image

modalAppendToBody, 可以变成一个更自定义化的吗,能够自己传 挂载在什么 节点上,例如想以编辑器为父节点
image

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants