Home/ Questions/Q 8370653
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T13:57:52+00:00

I am designing a simple Rich Text Editor using HTML/Javascript. It uses iframe. While

  • 0

I am designing a simple Rich Text Editor using HTML/Javascript. It uses iframe. While it is working great in IE6 (and possibly newer IE versions), it is broken in FireFox. The iframe cannot be edited or used in any way.

The HTML <body>

<input type="button" id="bold" class="Button" value="B" onClick="fontEdit('bold');">
<input type="button" id="italic" class="Button" value="I" onClick="fontEdit('italic');">
<input type="button" id="underline" class="Button" value="U" onClick="fontEdit('underline');">
<hr>
<iframe id="TextEditor" class="TextEditor"></iframe>

The Javascript (for IE)

TextEditor.document.designMode="on";
TextEditor.document.open();
TextEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
TextEditor.document.close();
TextEditor.focus();

The above script makes iframe editable in IE. Fails to do so in FF. So I changed a few things for FF version-

The Javascript (for FF)

id("TextEditor").contentWindow.designMode="on";
id("TextEditor").contentWindow.open(); //this line is responsible for pop-ups
id("TextEditor").contentWindow.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>'); //this line throws error: id("TextEditor").contentWindow.write is not a function at the FF debug console.
id("TextEditor").contentWindow.close();
id("TextEditor").focus();

This section of code makes FF provoke an pop-up alert with a blank page as a target. It’s still broken. What now follows are general functions for things like id() and fontEdit()–

function fontEdit(x,y){
  TextEditor.document.execCommand(x,"",y);
  TextEditor.focus();
}

function id(id){
  return document.getElementById(id);
}

function tag(tag){
  return document.getElementsByTagName(tag);
}

I’m sure FF doesn’t handle iframe this way. So how do I get iframe to be used as a Rich Text Editor and without showing pop-ups. Please try your best to avoid jQuery since I’m not that good in it yet. Which is why the custom functions like id() and tag() exists.

And, I’m aware that there are other freely available Text Editors for me to download and use so please do not suggest me any such solutions and do not ask me why I must re-invent the wheel. Only answer if you know where I am going wrong and if you can actually help me fix the problem.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    FF provoke an pop-up alert with a blank page as a target because you are calling the function window.open, instead you shoud call document.open.

    window.open: opens a new browser window.

    document.open: It opens an output stream to collect the output from any document.write() or document.writeln() methods. Once all the writes are performed, the document.close() method causes any output written to the output stream to be displayed.
    Note: If a document already exists in the target, it will be cleared.

    See The open() method

    This should works for you:

    id("TextEditor").contentWindow.document.designMode="on";
id("TextEditor").contentWindow.document.open(); //this line is responsible for pop-ups
id("TextEditor").contentWindow.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>'); //this line throws error: id("TextEditor").contentWindow.write is not a function at the FF debug console.
id("TextEditor").contentWindow.document.close();
    • 0