Hufe921 / canvas-editor

rich text editor by canvas/svg
https://hufe.club/canvas-editor-docs
MIT License
3.46k stars 503 forks source link

元素支持悬浮提示 #762

Open bettersoft123 opened 3 weeks ago

bettersoft123 commented 3 weeks ago

What problem does this feature solve?

在编辑文档过程中,有些元素需要提醒如何填写,能后在录入过程中,光标聚焦的时候自动弹出hint提示框?或者鼠标移动到控件上提示。离开的时候恢复。

What does the proposed API look like?

如上

daria2023 commented 3 weeks ago

instance.eventBus.on('controlChange', (payload: IControl | null) => void) instance.eventBus.on('mouseenter', (evt: MouseEvent) => void) 可以去文档看一下:https://github.com/Hufe921/canvas-editor/blob/main/docs/guide/listener.md

bettersoft123 commented 3 weeks ago

instance.eventBus.on('controlChange', (payload: IControl | null) => void) instance.eventBus.on('mouseenter', (evt: MouseEvent) => void) 这是两个监听方法啊,我是想在控件的上方或者旁边,有hint提示,这个怎么实现哩?谢谢。

daria2023 commented 3 weeks ago

controlChange给你返回了IControl,你可以这获取到控件的信息,在结合range去获取当前位置,去做一个绝对定位的信息提示,你可以参考一下hyperlink是怎么实现点击后显示跳转网址的。

bettersoft123 commented 3 weeks ago

这个必须要改源码才行吧?不改源码没法实现吧?

Hufe921 commented 3 weeks ago

https://github.com/Hufe921/canvas-editor/issues/739 暂时可以参考这个示例实现,考虑后续内部支持提示可选

bettersoft123 commented 3 weeks ago

我在参考楼上博主的实现方法,再改您的源码,感觉有难度。希望能加上去哈。这个在做EMR的时候还是很有价值的。谢谢您。如果您方便的话,加下QQ群935536135,有几十个您的忠粉。希望能得到您的帮助,也能让canvas-editor走的更远。谢谢。