Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to empty TINYMCE content after ajax action with jquery

I add contents in some input fields and textarea with jquery ajax function. Only textare uses TINYMCE.

However after ajax, the text in TINYMCE does not refresh and remains.

How can I empty content in TINYMCE with jquery?

My current code it following.

//on submit event
    $("#specformentry").submit(function(event){
        event.preventDefault();
        if(checkForm()){
          //  var href = $(this).attr("href");
            submitinput.attr({ disabled:true, value:"Sending..." });
            //$("#send").blur();
            //send the post to shoutbox.php
            $.ajax({
                type: "POST",
                url: "../../Ajaxinsertspec",
                data: $('#specformentry').serialize(),
                complete: function(data){
                     update_entry();
                     specdesc.val('');
                     datecreated.val('');
                     detailstext.val('');
               // this code is supposed to empty the INYMCE content, but it does not

                    //reactivate the send button
                    submitinput.attr({ disabled:false, value:"Enter Spec" });
                }
             });
        }
        else alert("Please fill all fields!");
        //we prevent the refresh of the page after submitting the form
        return false;
    });

And the following is a part of HTML

<div id="enterlabel"><label for="spec_details">Click me to enter Spec Details</label></div>
<div style="display: block;" id="textarea">
<textarea style="display: none;" name="spec_details" cols="90" rows="12" id="detailstext"></textarea>
<span class="mceEditor defaultSkin" id="detailstext_parent">
    <table style="width: 100px; height: 100px;" class="mceLayout" id="detailstext_tbl" cellpadding="0" cellspacing="0">
        <tbody><tr class="mceFirst">
          <td class="mceToolbar mceLeft mceFirst mceLast"><a href="#" accesskey="q" title="Jump to tool buttons - Alt+Q, Jump to editor - Alt-Z, Jump to...
...
like image 341
shin Avatar asked Oct 06 '10 16:10

shin


People also ask

Does TinyMCE require jQuery?

You don't need to use tinymce as a jQuery plugin but the option is there if you would like to. The vast majority of the tinymce source code is in the tinymce. min. js file and the jQuery.

How do you destroy TinyMCE?

Use tinymce. remove() method to remove TinyMCE editor from the HTML element and again call tinymce. init() on the selector to reinitialize.

How do I get TinyMCE content?

The TinyMCE getContent and setContent methods You can do this using the getContent() API method. Let's say you have initialized the editor on a textarea with id=”myTextarea”. This will return the content in the editor marked up as HTML.

How do I save HTML content of TinyMCE into a file?

Hello, To save the page, you have to insert TinyMCE in a HTML form and add a submit button. Then you'll have to handle the submitted form with a language like PHP. A call to the file_put_contents() function should do it.


2 Answers

You do not need jQuery to empty tinymce. Get the tinymce instance by id and set the content to '' (equals empty) using

//the id of the first editorinstance of the page is to be found in tinymce.editors[0].id

var tinymce_editor_id = 'my_tinymce_id'; 
tinymce.get(tinymce_editor_id).setContent('');
like image 97
Thariama Avatar answered Oct 24 '22 06:10

Thariama


This worked for me:

tinyMCE.activeEditor.setContent('');

Especially if it's the only editor existing in your page.

like image 43
JohnnyQ Avatar answered Oct 24 '22 04:10

JohnnyQ