Question

I have seen other questions asked on this topic, here on SO as well as other sites, but I have not been able to find a solution. I am using TinyMCE to allow the user to enter formatted text. There is a Save button which makes an Ajax call using JQuery and uploads the textarea contents to the server, where it is stored as html in the database.

Later, when the user comes back to the page, I want to display the formatted text that they entered previously. So, when the page loads, the html is stored in a hidden column of a DataTable. The TinyMCE textarea does not exist when the page loads, it is constructed dynamically using JQuery when the user clicks a button. The JQuery script copies the html from the hidden table cell into the textarea, and I call TinyMCE, again using the JQuery plugin, to convert the textarea to a TinyMCE editor.

The problem is that the TinyMCE editor displays the saved html, including the html tags. For example:

<p>Saved text</p>

I do not want it to display the html tags, I want it to format the text accordingly. How do I fix this? Any and all help is appreciated.

An abbreviated version of my javascript code:

$('img').live('click', function() {

    // Copy the html into the textarea.
    $(this).closest('tr').next().find('textarea').val(gData[id].comments);

    // Convert the textarea into an editor.
    $(this).closest('tr').next().find('textarea').tinymce({

        // Location of TinyMCE script
        script_url : 'js/tiny_mce/tiny_mce.js',

        theme : "simple"
    });
}

Answer 1

You are displaying encoded version of the tags on the client side.

Therefore tinyMCE sees them as encoded and displays them as such.

For example:

It sees: <p> ===> <p>

Or <p>Saved text</p> ===> <p>Saved text</p>