Home » Jquery » javascript – IFrame "designMode" detect change of cursor position-Exceptionshub

javascript – IFrame "designMode" detect change of cursor position-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am trying to create a WYSIWYG editor in javascript – of course, just for educational purposes. I actually have a function, where I can get the tagnames of an element, and of all parent elements.

Here is an example:

var editor = $('#editor');
editor.contents().keypress(function(e) {
   if (e.keyCode == 13) {
      var iframe = document.getElementById("editor");
      var tags = getIframeSelectedTags(iframe.contentWindow, true);
      console.log(tags);
   }
}

This will output the following (as array), when I press enter while my cursor is in this <body><div><b>Some text</b></div></body>:

0: BODY
1: DIV
2: B
3: TEXT

Now, I want to detect, in which element the cursor is, when the user clicks to some content, writes content,… – whenever the cursor changes to another position, or another element in my iframe.

When I can detect this, I just need to call my function, to get the tags of this element. Based on this response, I can show the user, which formating he has selected actually (for example change the color of the button, where the user can make his text bold etc.)

I hope, I explained my question well, if not, just let me know. If you need the function to get the tags, also let me know (I dont think this is important, because I just need to call the function so I think I dont have to modify this).

Thanks in advance.

How to&Answer: