Hiya all,

I have a page which loads the TinyMCE editor. On the postback I obviously want to fetch that data again but the value stays empty. Strangely enough, when I disable the "updatepanel" control I do get the value. Now, this leaves me puzzled.

Here's the code (c# from code behind) for the page that reads and writes the TinyMCE text:

1            private Question _question;
2    
3            protected Question Question
4            {
5                get { 
6                    if(_question == null)
7                        _question = GuiLayer.SelectQuestion(Convert.ToInt32(Request.QueryString["id"].ToString()));
8                    return _question; 
9                }
10           }
11           
12           protected void Page_Load(object sender, EventArgs e)
13           {
14               if (!Page.IsPostBack)
15               {
16                   txtTekst.Text = Server.HtmlDecode(Question.AnswerPrefab);
17                   DataBind();
18               }
19           }
20   
21           protected void btnsaveQuestion_Click(object sender, EventArgs e)
22           {
23               if (Page.IsValid)
24               {
25                   ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "init", "InitTiny();", true);
26                   Question.AnswerPrefab = Server.HtmlEncode(txtTekst.Text);
27                   GuiLayer.UpdateQuestion(_question);
28               }
29           }

Here's the corresponding asp.net page:

1    <asp:Content ID="Content1" ContentPlaceHolderID="DefaultPlaceHolder" Runat="Server">
2        <script src="../../Scripts/tiny_mce/tiny_mce.js" type="text/javascript" language="javascript"></script>
3        <script type="text/javascript" language="javascript">
4        tinyMCE.init({
5            mode : "textareas",
6            encoding : "xml",
7            theme : "advanced",
8            theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,link,bullist,numlist,undo,redo,code",
9            theme_advanced_buttons2 : "",
10           theme_advanced_buttons3 : "",
11           theme_advanced_toolbar_location : "top",
12           theme_advanced_toolbar_align : "left",
13           theme_advanced_path_location : "bottom",
14           theme_advanced_resize_horizontal : false,
15           theme_advanced_resizing : true,
16           apply_source_formatting : true,	            
17           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]"
18       });
19       
20       function InitTiny()
21       {tinyMCE.execCommand('mceAddControl', false, '<%# txtTekst.ClientID %>');}
22       </script>
23       <h3>ManageQuestion</h3>
24       <p><asp:textbox runat="server" id="txtTekst" width="100%" textmode="multiLine" columns="80" rows="15" /></p>
25       <br />
26       <asp:button runat="server" id="btnSave" text="Save" onclick="btnsaveQuestion_Click" />
27        
28       <asp:button runat="server" id="btnBack" text="Back" postbackurl="~/Pages/Admin/ManageSurvey.aspx" />
29       
30   </asp:Content>

any help would be appreciated (obviously ).

Cheers, Nathan

 

ok, did some more testing, apparantly its a Firefox-only issue. The page works fine in Internet Explorer (7). 

Hi Nathan,

I'm not familiar with tinyMCE, but it seems it's not compatible with UpdatePanel.

I think you can use javascript to copy all contents in it to a hiddenfield when the page is about to be posted. Then, retrieve the contents from the HiddenField rather from the control itself.

For instance:

<input type="submit" onclick="$get('hf').value = $get('id of tinyMCE').value"> 

<input type="hidden" id="hf" />

If this still doesn't work, I'd suggest contacting the vendor of the control for more help. 

Hi Raymond,

You're right, that probably would have fixed it too. Right now I'm opening up the edit panel in a newwindow. Its a workaround but hey, it works. Maybe it'll be fixed in either the next version of TinyMCE or the updatepanel!

cheers! 

TinyMCE and UpdatePanels are really hard to use together. In Firefox especially.

I've done a working example on my blog with the whole project in C# as zip-file. A reader  also translated it into VB.NET. Been testen in IE7, FF2 and Opera.

I found the solution to get the values posted with a javascript-function on a forum, like this.

function SaveMyPreciousValues()
{
tinyMCE.triggerSave(false,true);
TextBox1 = document.getElementById('TextBox1');
alert('Check value when posting: '+ TextBox1.value)
}

Then attach it to the button OnClientClick="SaveMyPreciousValues();"

Read about it here: 

http://codeodyssey.com/blog.aspx?id=334

And in Swedish:

http://codeodyssey.se/blog.aspx?id=334

Hope this can help you.

Cheers, I'll look into that! Thanks for the help! 

Hi,

Did you get answer results from your work?  I'm fighting this problem myself right now.  I'm using:

But this does not appear to restyle the control properly!

Hi!

Have found a solution to your problem? After more than day searching for an acceptable solution, I found this approach working for me!

1. Initialize the editor as you would do when you don't use a UpdatePanel with tinyMCE.init(...);
2. Set the button's OnClientClick property to UpdateTextArea. This function updates the teaxtarea with the tinyMCE values from the IFrame before the values are posted.

function UpdateTextArea()
{

    tinyMCE.saveTrigger(false, true); 

}

3. Unload tinyMCE editor before the async post to server. If I don't unload the editor, i receive the error "this.getDoc() has no properties". Unload the editor with a function that is attached to the beginRequest event. Use
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler).

    function BeginRequestHandler(sender, args)
    {
        // Fix to make tinyMCE work with UpdatePanel

        var elem = args.get_postBackElement();
        if (elem.id == '<%= ibSave.ClientID %>') // Only the button unloads the editor
        {

            // Check that there is an instance to remove
            if (tinyMCE.getInstanceById('<%= tbContent.ClientID %>') != null && tinyMCE.getInstanceById('<%= tbContent.ClientID %>') != "undefined")
            {
                tinyMCE.execCommand('mceFocus', false, '<%= tbContent.ClientID %>');   
                tinyMCE.execCommand('mceRemoveControl',false,'<%= tbContent.ClientID %>');
            }
        }
    }
 

4. Save the posted values on the server and capture the endrequest event with Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler)

    function EndRequestHandler(sender, args)
    {

       // Ensure that the editor is not loaded
       if (tinyMCE.getInstanceById('<%= tbContent.ClientID %>') == null || tinyMCE.getInstanceById('<%= tbContent.ClientID %>') == "undefined")
       {
           tinyMCE.execCommand('mceAddControl',false,'<%= tbContent.ClientID %>');
       }
    }

 Hope this info will help you!

/Stefan 

Hello.

Cheers for that post steho706.

I have worked a bit more with it and made an AJAX Extender - which extends the basics of your posting a bit more. Code is also available.

http://weblog.e-agora.nl/cdevos/?p=4
http://weblog.e-agora.nl/cdevos/wp-content/uploads/2008/02/tinymcetextbox.zip

In essence all you need to do is

1    <asp:TextBox ID=”TextBox1″ runat=”server” Width=”100%” Height=”200″ TextMode=”MultiLine” />
2    <cc:TinyMCETextBoxExtender TargetControlID=”TextBox1” ID=”TinyMCETextBoxExtender1″ runat=”server” />

So no more worries about this editor. Feel free to add to the project.

Regards,

CJ.