# Getting Selected Text/Cursor Position in Content Editable Element in Iframe

**URL:** <https://discourse.mozilla.org/t/getting-selected-text-cursor-position-in-content-editable-element-in-iframe/37188>\
**Category:** Development\
**Created:** [March 19, 2019, 10:18pm UTC](https://discourse.mozilla.org/t/getting-selected-text-cursor-position-in-content-editable-element-in-iframe/37188 "2019-03-19T22:18:54Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![msaroff](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/msaroff/32/20303_2.png) [@msaroff](https://discourse.mozilla.org/u/msaroff)\
**Post date:** [March 19, 2019, 10:18pm UTC](https://discourse.mozilla.org/t/getting-selected-text-cursor-position-in-content-editable-element-in-iframe/37188/1 "2019-03-19T22:18:54Z")

</div>

I have a context menu bbCode/HTML tagger ([see here](https://addons.mozilla.org/en-US/firefox/addon/bbcodewebex/)), and it works fine on ordinary text boxes, but it does not on contenteditable elements, such as the WYSIWYG modes of the editors in Blogspot and Wordpress, though it does in the code modes.

I want to add this functionality, because I want to add symbols, ™ € ⅔ ® etc., which **would** be directly useful in rich text editing mode.

For the text mode boxes, I use `document.activeElement.value` to get the contents of the box, `clickedElement.selectionStart` to get the start of the selection, and `clickedElement.selectionEnd` to get the end of the selection, which allows me to process the argument.

For the WYSIWYG mode, all these elements fail, though `document.activeElement.contentWindow.document.body.innerHTML` **does** give the contents of the edit window, and I can get the id by using `document.activeElement.id;`.

What I cannot figure out is how to get the selected text, or the start and end indices of the selection (would be the same if just an insertion point) for a contenteditable type element, at least when inside an iframe. (The case for both Blogspot and Wordpress).

A typical editor iframe looks like this:

````auto
<iframe style="padding: 0px; background-color: white; height: 100%;" class="composeBox editable" id="postingComposeBox" name="Rich text editor" aria-label="Edit post. Compose mode." frameborder="0">
   <html style="background:none transparent;min-width:0;">
      <head>
         <style>
<!-- omitted for brevity -->            
         </style>
      </head>
      <body g_editable="true" hidefocus="true" class="editable " id="postingComposeBox" style="min-width: 0px; width: 653px;" role="textbox" contenteditable="true">
         <p>[b][b][b][b][b]aaa[/b]</p>
         <p>bbb</p>
         <p>[b]ccc[/b][/b][/b][/b][/b]</p>
      </body>
   </html>
</iframe>```
````