TinyMCE Interst existing HTML

Question

Ok, I have a div, when you click on the div, I insert a textarea, then add tinyMCE controll to that textarea. Ok, then you type in the wsgi editor and press save to save it.

Then the html form the tinyMCE editor gets saved, and the textarea and tinyMCE element is removed and the html from tinyMCE is inserted in the div again.

That works nice, now, When I click on the div, with HTML, I want that HTML to display inside the tunyMCE editor.

This is what I have done, but once I click on the div, it adds the html, then removes it, why is this happening?

     // Click on the div element
     $(".editable").live("click", function(e){

        var f = $(this);
        // get the html if it is there
        html = f.html();
        // insert a textarea with a unique id
        f.html('<textarea class="item_html" id="'+ e.timeStamp +'"></textarea> ')
        f.css("height","100%")  
        //add tinyMCE control to the textarea
        tinyMCE.execCommand(
            'mceAddControl',
            false,
            f.find("textarea").attr("id")
        );  
        // if there was html insode the div clicked on, add it into the editor
        tinyMCE.execCommand(
            'mceInsertContent',
            false,
            html
        );
    });

Thariama Thariama · Accepted Answer · 2011-10-13T11:22:59

The part

// If there is html in the div clicked, add it to the mce editor
if (html) {
   tinyMCE.activeEditor.setContent('html');
}

won't work and throw an error because the editor instance is not fully initialized at that time.

Have a look at the changes i made. Here: http://jsfiddle.net/M3gNm/9/ The editor content

TinyMCE Interst existing HTML

1 Answers