Question

I am trying to get the selected area from an iFrame. There are a couple of similar post here but none works, so I decided to give it another try again.

function getIframeSelectionArea() {
var frm = frames['iFrameTextBody'].document;
var win = frm.contentWindow;
alert(win.getSelection().toString());
}

So what I am trying to implement is similar to what’s implemented in stackoverflow post textarea. Now I know they are using a variation of a 3rd party wysiwyg editor. I am trying to re-event the wheel purely for educational purposes.

My implementation is simple. I want to select a text and say by clicking bold have <b></b> tags appear on either side of the selected area. I know I an use execCommand(‘bold’, false, null) to do the same. As I said before this is a experiment.

The idea is, once the selected area is returned, call the following function:

    function addhtmlTag(str){
    var frm = frames['iFrameTextBody'].document;
    var frmbody = frm.getElementsByTagName('body')[0];
    var bold_tag = frm.createElement('b');
    bold_tag.textContent = str;
    frmbody.appendChild(bold_tag);
}

Any insight is greatly appreciated!

Cheers

Drjay

Answer 1

Do you mean something like:

function getSelectionFrame() {
   var frame = document.getElementById(frameId);
   var frameWindow = frame.contentWindow;
   var frameDocument = frameWindow.document;
   if (frameDocument.getSelection) {
      return frameDocument.getSelection();
   } else {
      return frameDocument.selection.createRange().text;
   }
}