Rank 1
Hi, I have a custom tool in the editor that allows the user to insert images with the max width set to 300px (set via the style attribute). This is so that the image inserted into the Rich Text Editor looks like a thumbnail.
How would I go about displaying the full-size image when the user hovers over the thumbnail?
1 Answer, 1 is accepted
Hello Thushan,
Although that we do not have built-in functionality that we can suggest, you can take a look at the following thread for how to handle hover over a node with a plugin:
- https://discuss.prosemirror.net/t/handling-mouse-events-for-nodes/1813
- https://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents
Once you handle the hover (onmouseover/onmouseenter) event over the image, you can implement some logic that will display a popup with the full size image for example.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Thanks Konstantin - I did manage to find a solution earlier this morning and came across the same pages you've linked.
I ended up following this and created a stateful plugin which handles the mouseover event - so if the event is over a certain image element, then it sets the "visible" state to true, otherwise false. It also stores the position of the mouse so that it can be used below.
This plugin is then attached to a tooltip DOM element, that will check the plugin's state for the "visible" and "position" properties and then displays a full-sized image over the thumbnail image. I had to play around with the element styles here to make sure the full-sized image is correctly positioned in the editor.