javascript - How to clear the contents of the openwysiwyg editor? - Stack Overflow

admin管理员组

文章数量:1415145

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?

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?

• javascript
• jquery
• wysiwyg

Share Improve this question Follow edited Jun 12, 2009 at 4:55 Paolo Bergantino 489k8282 gold badges522522 silver badges437437 bronze badges asked Jun 12, 2009 at 4:26 user109162user109162 14744 silver badges1616 bronze badges 5

• You should specify you are in fact using the openwysiwyg editor as that is what you are trying to empty. The code you have there will probably empty a textarea what you have is an editor that does all kind of funky magic. :) – Paolo Bergantino Commented Jun 12, 2009 at 4:27
• try $('#report').attr('value',''); – TheVillageIdiot Commented Jun 12, 2009 at 4:29
• Thanks Paolo.. I didn't realize that this editor was an animal unto its own. Would this be a really difficult thing to do? If its going to be long and drawn out, I'll just leave it for you to finish up. – user109162 Commented Jun 12, 2009 at 4:35
• Yes, it is, unfortunately. I just went through the source code and surprisingly was unable to find a way to empty the editor. You have to realize that what this editor is actually doing is creating its own iframe/table/div where it displays all the data in its "wysisyg" form and then hides the actual textarea element you started off with, as it is impossible to show images/styles/etc in a regular textarea. This is why we had to "sync" the contents of the two in the other question, and this is why you emptying the textarea is not doing anything in this case. This isn't related to jQuery at all. – Paolo Bergantino Commented Jun 12, 2009 at 4:40
• Thanks Paolo. As I scanned the source code on that editor, I was also able to see from the ments that the developer was hiding the textarea and using an iframe also. When jonathan suggested me to ise firebug and I saw an iframe, I immediatly wondered how an iframe got into the code. I knew I didn't use an iframe anywhere. I'm starting to see that JQ and javascript has the ability to dynamiclly add these things into the code. I am learning.. little by little – user109162 Commented Jun 12, 2009 at 5:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 ments) 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./index.cfm?dax=blog:1592.view

---

This is a hacked excerpt of the example.html that es 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 :)

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.

I believe this works

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

本文标签： javascriptHow to clear the contents of the openwysiwyg editorStack Overflow