Hi, I'm currently struggling with a feature request and wondering whether anyone has any suggestions for a good way to implement it.
We make use of the Editor control and allow users to insert images. Images appear as a thumbnail by setting the width on their inline style attribute.
Users would like some way of temporarily viewing the image, my thoughts are to perhaps have a CSS hover state that shows a small button which would display the full size image in a lightbox. (Might have to configure the Editor to not make use of iframe?)
Any suggestions would be greatly appreciated! Thanks.
2 Answers, 1 is accepted
Rank 5
Bronze
Bronze
Bronze
Hi.
Did you checkout the Popover Component? You could show your button on hover of the image or even trigger the Popover directly when the user hovers the image. As far as I know it doesn't have a lightbox but maybe it works without.
Just a thought...
Greetings,
Bernd
Hi, James,
Although we lack a built-in feature that we can suggest, you can refer to the following discussion thread for guidance on implementing node hover functionality through a plugin:
- https://discuss.prosemirror.net/t/handling-mouse-events-for-nodes/1813
- https://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents
Once the hover onmouseover and onmouseenter events have been handled over the image, you can implement logic that will display a popup with the image. The Popover is a suitable component for that, as Bernd has pointed out.
Regards,
Filip
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!