views:

670

answers:

3

I am working on something like this:

On a webpage, there is an article wrapped in a DIV, an Edit button. When a user click on the Edit button, insert an textarea via javascript, load the html of the DIV into the textarea, load and initial tinymce. When the user click on the Save button, save and update the article via ajax, and destroy tinymce completely.

The problem is that, I failed to destroy tinymce. Here is the doc of the destroy method.

I am using the jQuery version of tinymce, the lastest V3.2.2

Here is the sample code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript" src="../js/tinymce/jquery.tinymce.js"></script>
        <script type="text/javascript">
            $(function() {
                $('button.load').click(loadTinyMCE);
                $('button.destory').click(destoryTinyMCE);
            });

            function loadTinyMCE() {
                $('textarea').tinymce({
                    script_url : '../js/tinymce/tiny_mce.js'
                });
            }

            function destoryTinyMCE() {
                $('textarea').tinymce().destroy();
            }
        </script>
    </head>
    <body>
        <textarea>abc</textarea>
        <button type="button" class="load">Load TinyMCE</button>
        <button type="button" class="destory">Destory TinyMCE</button>
    </body>
</html>
+1  A: 

To 'destroy' an element in jquery, use $(node).remove(). If this doesn't work, a code example will help us understand/answer your question better.

Jared Forsyth
+2  A: 

Use remove() instead.

Ethan
+2  A: 

You already have a practical accepted solution with remove() so here's an answer about destroy().

Destroy methods (sometimes called dispose) are common in many programming languages to allow clean up of resources used by an instance of something. Destroy is conventionally a pure memory concept (i.e. non-visual). The destroy method is often different than an object-oriented destructor method by lifetime in that destroy is intended to be allowed to be called explicitly by the programmer in order to clean up memory and resources before the final destructor runs or before the garbage collector comes along (in either case earlier, so you can release stuff when you don't need it any longer instead of letting those resources be used until the end of the program). Sometimes the destructor method will naturally contain a call to the destroy method, to ensure any resources are finally cleaned up, so usually the programmer doesn't have to worry about not calling it because it will eventually be called automatically.

Often the destroy method code body is provided by the programmer for application-specific behaviour (overridden from the base class/object in some languages). This means that calling destroy without having provided an implementation for it will often do nothing - an empty code body. Of course for TinyMCE it will have implemented its own destroy methods appropriately.

The TinyMCE documentation doesn't promise any visual changes upon destroy, only that the instance will be stripped of memory leaking possibilities. This is in line with what destroy methods commonly do.

Destroys the editor instance by removing all events, element references or other resources that could leak memory. This method will be called automatically when the page is unloaded but you can also call it directly if you know what you are doing.

This is also why TinyMCE provides a remove() method to visually change things, because destroy() is not intended to carry out the exact same purpose.

In order to destroy TinyMCE completely you might issue remove() for visual cleanup followed by dispose() for memory cleanup; however those methods are implementation specific and I'm unsure how TinyMCE would react.

John K
ahh..So I guess it safer to do it like this:function destoryTinyMCE() { $('textarea').tinymce().remove(); $('textarea').tinymce().destroy();}But I noticed no memory change compared to calling remove() alone. Perhaps memory leak may become notable only in rare cases in certain browser after calling init and remove repetitively for many times.
powerboy