Small plugin in Jquery/Javascript with WYSIWYG editor

Hi,
I need a Jquery/javascript expert for develop a small plugin. Requirements are as follows.
1) There will be a WYSIWYG editor and we have to insert one headline tag (<h1>Sample heading</h1>) and one image. I prefer summernote WYSIWYG editor as it having an easy image upload functionality, but it's upto you that which editor prefer. What ever the editor you prefer, it should have all basic WYSIWYG funtionalities.
Atlast there will be a button after WYSIWYG editor.

2) While clicking the button , I need coordinates of Heading and image tag and mentioned in point (1) and should generate following JSON response.

{
tag : h1, // H1 element
content : Sample heading, //H1 Value
style : style attributes //Style settings , if any
x-coordinate:0
y-coordinate:100
},
{
tag : img, // Image element
src: sample.jpg, //img src
style : style attributes //Style settings , if any
x-coordinate:50
y-coordinate:200
},

For helping you better, I can share you a sample code to get cordinate of HTML elements.
Please check, https://www.geeksforgeeks.org/retrieve-the-position-xy-of-an-element-using-html/
We've to modify this script to get the element position inside WYSIWYG editor.
Please note that the position of the element must be relative to WYSIWYG editor

I can share you one additional link for help -> https://ckeditor.com/old/forums/CKEditor-3.x/Cursor-coordinates-XY-SOLVED

Only quote who have extensive knowledge in Jquery/Javascript language.