TinyMCE with AJAX (Update Panel) never has a value

Question

I wanted to use a Rich Text Editor for a text area inside an update panel.

I found this post: http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors via this question: Need ASP.Net/MVC Rich Text Editor

Decided to go with TinyMCE as I used it before in non AJAX situations, and it says in that list it is AJAX compatible. Alright I do the good ol' tinyMCE.init({ //settings here }); Test it out and it disappears after doing a update panel update. I figure out from a question on here that it should be in the page_load function so it gets run even on async postbacks. Alright do that and the panel stays. However, upon trying to submit the value from my textarea, the text of it always comes back as empty because my form validator always says "You must enter a description" even when I enter text into it. This happens the first time the page loads and after async postbacks have been done to the page.

Alright I find this http://www.dallasjclark.com/using-tinymce-with-ajax/ and Can't post twice from the same AJAX TinyMCE textarea. I try to add this code into my page load function right after the tinyMCE.init. Doing this breaks all my jquery being called also in the page_load after it, and it still has the same problem.

I am still pretty beginner to client side scripting stuff, so maybe I need to put the code in a different spot than page_load? Not sure the posts I linked weren't very clue on where to put that code.

My Javascript:

<script type="text/javascript">

var redirectUrl = '<%= redirectUrl %>';

function pageLoad() {

    tinyMCE.init({
        mode: "exact",
        elements: "ctl00_mainContent_tbDescription",
        theme: "advanced",
        plugins: "table,advhr,advimage,iespell,insertdatetime,preview,searchreplace,print,contextmenu,paste,fullscreen",
        theme_advanced_buttons1_add_before: "preview,separator",
        theme_advanced_buttons1: "bold,italic,underline,separator,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,separator,styleselect,formatselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,separator,removeformat,cleanup,charmap,search,replace,separator,iespell,code,fullscreen",
        theme_advanced_buttons2_add_before: "",
        theme_advanced_buttons3: "",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        extended_valid_elements: "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        paste_auto_cleanup_on_paste: true,
        paste_convert_headers_to_strong: true,
        button_tile_map: true
    });

    tinyMCE.triggerSave(false, true);
    tiny_mce_editor = tinyMCE.get('ctl00_mainContent_tbDescription');
    var newData = tiny_mce_editor.getContent();
    tinyMCE.execCommand('mceRemoveControl', false, 'your_textarea_name');

    //QJqueryUI dialog stuff
}</script>

Now my current code doesn't have the tinyMCE.execCommand("mceAddControl",true,'content'); which that one question indicated should also be added. I did try adding it but, again, wasn't sure where to put it and just putting it in the page_load seemed to have no effect.

Textbox control:

<asp:TextBox ID="tbDescription" runat="server" TextMode="MultiLine" 
                Width="500px" Height="175px"></asp:TextBox><br />

How can I get these values so that the code behind can actually get what is typed in the textarea and my validator won't come up as saying it's empty? Even after async postbacks, since I have multiple buttons on the form that update it prior to actual submission.

Thanks!

Edit: For further clarification I have form validation on the back-end like so:

If tbDescription.Text = "" Or tbDescription.Text Is Nothing Then
        lblDescriptionError.Text = "You must enter a description."
        isError = True
    Else
        lblDescriptionError.Text = ""
    End If

And this error will always cause the error message to be dispalyed.

Edit:

Alright I am getting desperate here, I have spent hours on this. I finally found what I thought to be a winner on experts exchange which states the following (there was a part about encoding the value in xml, but I skipped that): http://www.experts-exchange.com/Programming/Languages/C_Sharp/Q_25059848.html

For anyone who wants to use tinyMCE with AJAX.Net:

2. Append begin/end handlers to the AJAX Request object. These will remove the tinyMCE control before sending the data (begin), and it will recreate the tinyMCE control (end):

   Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, args) {
       var edID = "<%=this.ClientID%>_rte_tmce"; // the id of your textbox/textarea.
       var ed = tinyMCE.getInstanceById(edID);
     if (ed) {
       tinyMCE.execCommand('mceFocus', false, edID);
       tinyMCE.execCommand('mceRemoveControl', false, edID);
   }
       });
   
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) {
        var edID = "<%=this.ClientID%>_rte_tmce";
         var ed = tinyMCE.getInstanceById(edID);
         if (ed) {
       tinyMCE.execCommand('mceAddControl', false, edID);
         }
      });
   

3. When the user changes/blurs from the tinyMCE control, we want to ensure that the textarea/textbox gets updated properly:

      ed.onChange.add(function(ed, l) {
          tinyMCE.triggerSave(true, true);
    });
   

Now I have tried this code putting it in its own script tag, putting the begin and end requests into their own script tags and putting the ed.onChange in the page_load, putting everything in the page_load, and putting all 3 in it's own script tag. In all cases it never worked, and even sometimes broke the jquery that is also in my page_load... (and yes I changed the above code to fit my page)

Can anyone get this to work or offer a solution?

The code

Answer 1

I'd just like to add my solution to this post, as I had been wrestling with the same issue for a couple days. I realise this is an old post, but maybe my answer will help someone, since I believe the question is still relevant.

I'm developing an ASP.NET web forms application, and one of the pages has a textarea control contained within an UpdatePanel. tinyMCE binds to this textarea. Text for the textarea comes from a bound textbox within a repeater control, because I want to get the text from an ObjectDataSource control, and this is a slightly cludgey way of doing that. To my mind, ObjectDataSource controls are convenient and they execute quickly.

Here is my markup containing the ObjectDataSource control, the repeater, the bound textbox, and the textarea (an asp:TextBox set to multiline). Note that the bound textbox is set to "display: none":

<asp:ObjectDataSource ID="odsDetailText" runat="server" TypeName="Data.Document" SelectMethod="GetDocumentDetailText" />
<asp:Repeater ID="repBody" runat="server" DataSourceID="odsDetailText">
    <ItemTemplate>
        <asp:TextBox ID="tbxBodyBound" runat="server" Text='<%# Eval("Body") %>' CssClass="hidden" />
    </ItemTemplate>
</asp:Repeater>
<asp:TextBox ID="tbxBody" runat="server" TextMode="MultiLine" />

I also have an asp:Button to save text in tinyMCE to SQL Server. All of these controls are contained within an UpdatePanel.

I have placed all of my jQuery and JavaScript code in a separate file. I include the relevant bits below. As an overview:

• I initialise tinyMCE in the JavaScript pageLoad event. Note that this event fires for full and partial (async) postbacks, so tinyMCE is always displayed and doesn't disappear between full or partial postbacks.

• Also in the pageLoad event, if a postback is async, I begin listening for a BeginRequest event raised by the ASP.NET PageRequestManager. I stop listening for the BeginRequest event in the JavaScript pageUnload event. This prevents more and more listeners being added each time pageLoad fires.

• When the event handler for the BeginRequest event fires (when the Save button on my page is clicked), I get the HTML contents of the tinyMCE text editor and save it to a cookie. I use the jQuery cookie plugin to do this: https://github.com/carhartl/jquery-cookie. The HTML is encoded in the cookie, for safety.

• Now, in the server code that executes when the Save button is clicked, the cookie's text (which is encoded HTML) is retrieved and saved to SQL server. The cookie is now deleted.

• ASP.NET binds the saved data to the hidden textobx via the ObjectDataSource control, the textarea control's value is set to the hidden textbox's, and the portion of the page within the UpdatePanel is rendered back to the browser.

• tinyMCE now displays this text from the textarea, but it is encoded HTML and not human readable.

• So, in the JavaScript pageLoad event, I format the tinyMCE text by decoding the HTML.

• Job done!

Here are the relevant parts of my script file:

// #########################################################
// Events
// #########################################################
// ---------------------------------------------------------
// Check for full and partial postbacks
// ---------------------------------------------------------
function pageLoad(sender, args) {

    // Register event handler for async postback beginning
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (!prm.get_isInAsyncPostBack()) {
        prm.add_beginRequest(onBeginRequest);
    };

    // Configure HTML editor
    HTMLEditorConfig();

    // Format HTML editor text
    HTMLEditorFormat();
};

// ---------------------------------------------------------
// When page unloads after full or partial postback
// ---------------------------------------------------------
function pageUnload(sender, args) {

    // Deregister event handler for async postback beginning
    Sys.WebForms.PageRequestManager.getInstance().remove_beginRequest(onBeginRequest);
};

// ---------------------------------------------------------
// Event handler for async postback beginning
// ---------------------------------------------------------
function onBeginRequest() {

    // Check whether to save text editor text
    HTMLEditorSave();
};

// #########################################################
// Functions
// #########################################################
// ---------------------------------------------------------
// Configure HTML text editor. tinyMCE converts standard textarea controls
// ---------------------------------------------------------
function HTMLEditorConfig() {

    // Determine edit mode
    var editMode = $('input:hidden[id*=hfEditMode]').val().toLowerCase();

    // If not in edit mode, prevent edits
    var editorReadOnly = null;
    var editorHeight = null;
    if (editMode == 'true') {
        editorReadOnly = '';
        editorHeight = '332';
    } else {
        editorReadOnly = 'true';
        editorHeight = '342';
    };

    // Initialise HTML text editor
    tinyMCE.init({
        mode: "textareas",
        plugins: "advhr,insertdatetime,print,preview,fullscreen",
        width: "488",
        height: editorHeight,

        // Theme options
        theme: "advanced",
        theme_advanced_buttons1: "newdocument,|,print,preview,|,cut,copy,paste,|,undo,redo,removeformat,|,bold,italic,underline,strikethrough,sub,sup,|,forecolor,backcolor",
        theme_advanced_buttons2: "justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,fontselect,fontsizeselect",
        theme_advanced_buttons3: "insertdate,inserttime,|,advhr,|,charmap,|,fullscreen",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "none",
        theme_advanced_resizing: false,

        // Skin options
        skin: "o2k7",
        skin_variant: "silver",

        // Custom css
        content_css: "../../Script/tiny_mce/custom.css",

        // Allow edits?
        readonly: editorReadOnly
    });
};

// ---------------------------------------------------------
// Format HTML editor text by ensuring its HTML is decoded
// ---------------------------------------------------------
function HTMLEditorFormat() {

    // Check bound textbox containing HTML for text editor
    var bodyText = $('input:text[id*=tbxBody]').val();

    // If HTML exists, decode it
    if (bodyText !== null) {
        tinyMCE.activeEditor.setContent(decodeURIComponent(bodyText));
    };
};

// ---------------------------------------------------------
// Save HTML text editor text to cookie for server-side processing.
// Can't save to hidden field or asp control as this function fires after viewstate is captured (I think).
// Extra content in viewstate would slow down page load anyway.
// ---------------------------------------------------------
function HTMLEditorSave() {

    // Determine edit mode
    var editMode = $('input:hidden[id*=hfEditMode]').val().toLowerCase();

    // If in edit mode, create cookie with encoded text editor HTML. Server code will save this to database.
    if (editMode == 'true') {
        var textToSave = tinyMCE.activeEditor.getContent();
        $.cookie('HTMLEditorText', textToSave);
    }
};

Here is a portion of the server code that fires when the Save button is clicked:

Private Sub Save()

    'Retrieve tinyMCE text from cookie
    Dim cookieName As String = "tinyMCEText"
    Dim cookies As HttpCookieCollection = Request.Cookies
    Dim text As String = cookies(cookieName).Value

    'Save text to database...

    'Delete cookie
    cookies.Remove(cookieName)

    'Databind text for tinyMCE
    repeaterTinyMCE.DataBind()
    Dim encodedText As String = DirectCast(repeaterTinyMCE.Controls(0).Controls(1), TextBox).Text
    textboxTinyMCE.Text = encodedText
End Sub

Hope this helps someone.

Answer 2

I think you want to look at this posting: How to make TinyMCE work inside an UpdatePanel?

Make sure to register you init function with the scriptmanager

ScriptManager.RegisterStartupScript(this.Page, 
         this.Page.GetType(), mce.ClientID, "pageLoad();", true);

Answer 3

You have to trigger the save function when posting back, use Page.RegisterOnSubmitStatement to register the script tinyMCE.triggerSave();

I noticed that tinyMCE's init function can only be called selecting all textareas or textareas with a certain class. The exact doesn't work.

Answer 4

Well there were two ways I got this to work, which really didn't fix the problem just avoid it.

One was to use the FCKeditor .net control, this reloaded horribly slow though for me, like 2-3 seconds. So I decided to just make the form have two update panels, and put the text area in between then, essentially taking the text area out of the update panel. This felt kind of like a cheap trick that shouldn't be necessary, but it works fine. None of the solutions or suggestions anyone posted worked for me so that is what I did. If I HAD to put the text area into the update panel though, this wouldn't have worked.

Answer 5

One thing that I ran into when putting TinyMCE in an update panel was that I had to do all sorts of tricks to make it work right. Keep in mind how the update panel works, when you want to refresh it, it completely replaces the DOM inside of it, including the TinyMCE.

The workaround that I used was to remove the TinyMCE from the update panel and wrap anything else that needed to dynamically refresh in an update panel. I would then add data to TinyMCE via the javascript API it provides if I needed the TinyMCE content to be dynamic.