How to clear the contents of the openwysiwyg editor?

Question

I am using the openwysiwyg editor in my webpage. I want to clear the contents of it. I have used

$('#report').val('');

but that doesn't clear it.

The editor creates an iframe and updates the contents there, syncing as it goes.

How would I go about clearing it?

Answer 1

I believe this works

$('#report').text('');

Answer 2

You probably need to supply a bit more information - the html itself would be very useful, but I'm going to assume that report is the id of the textarea you need cleared.

If it's a normal textarea, your code should really work.

If (as Paulo mentions in the comments) it's being modified by an openwysiwyg editor, it's probably being turned into an iFrame with it's own HTML page in it. It's a lot more difficult to manipulate the iFrame.

Looks like that's the case.

---

Have a look at this example to see if it helps you reference the iFrame itself: http://www.bennadel.com/index.cfm?dax=blog:1592.view

---

This is a hacked excerpt of the example.html that comes with openwysiwyg:

<script type="text/javascript">
 // Use it to attach the editor to all textareas with full featured setup
 //WYSIWYG.attach('all', full);

 // Use it to attach the editor directly to a defined textarea
 WYSIWYG.attach('textarea1'); // default setup
 WYSIWYG.attach('textarea2', full); // full featured setup
 WYSIWYG.attach('textarea3', small); // small setup

 // Use it to display an iframes instead of a textareas
 //WYSIWYG.display('all', full);  

 function getIFrameDocument( id )
 {
  var iframe = document.getElementById(id);

  if (iframe.contentDocument) {
   // For NS6
   return iframe.contentDocument; 
  } else if (iframe.contentWindow) {
   // For IE5.5 and IE6
   return iframe.contentWindow.document;
  } else if (iframe.document) {
   // For IE5
   return iframe.document;
  } else {
   return null;
  }
 }

 function clearcontents()
 {
  getIFrameDocument('wysiwygtextarea1').body.innerHTML = '';
 }
</script>

Then somewhere in the page, I've got a clear button (actually div):

<div style="width:120px;height:20px;background:#ff0000;text-align:center;display:block;" onclick="clearcontents();">Clear!</div>

---

Note that the id of your textarea is prefixed with wysiwyg. That's the name of the iFrame.

I've tested this in Firefox but nothing else at the moment. The code for getting the iFrame I found on the Net somewhere, so hopefully it works for other browsers :)

Answer 3

This works, but is butt ugly:

var frame = WYSIWYG.getEditor('--ENTER EDITOR NAME HERE--');
var doc = frame.contentWindow.document;
var $body = $('html',doc);
$body.html('');

Replace --ENTER EDITOR NAME HERE-- by whatever you pass to the editor when you call attach.