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. 

Link is down for download, any mirrr somewhere?

Thx

**EDIT**

Found one at : http://weblogs.asp.net/blogs/cjdevos/downloads/tinymcetextboxextender/tinymcetextbox.zip

 I di have to make on minor twaek. When I tried to call

tinyMCE.saveTrigger(false, true);

 I got an error saing that the method does not support that property. and it was not sending the text back to the text area

// Fix to make tinyMCE work with UpdatePanel --- steho706 is a freakin genius!

if (elem.id == '<%= SendLinkButton.ClientID %>') // Only the button unloads the editor

// Check that there is an instance to remove --- steho706 is a freakin genius!

tinyMCE.execCommand('mceFocus', false, '<%= BodyTestBox.ClientID %>');

// Ensure that the editor is not loaded --- steho706 is a freakin genius!

</script>

I am trying to use steho706's code and it works for the first callback but if I save the page again I get a permission denied error in the tiny_mce js. Is there a workaround for this error?

I've spent most of the day trying to sort out the same problem and have come up with simple solution. My editor is in a form that has two modes: readonly and edit/insert, so I add and remove the tinyMCE editor dynamically; I only need it in the edit/insert mode. Eg:

        var notesID = "<%=NoteDetails.ClientID%>";

        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

        function pageLoaded(sender, args) {
            var currentMode = document.getElementById('<%=CurrentMode.ClientID%>');
            
            switch(currentMode.innerHTML) {
            case 'view':
                removeEditor();
                break;
            case 'edit':
                initialiseEditor();
                break;
            case 'new':
                initialiseEditor();
                break;
            }
        }

        function initialiseEditor() {
            tinyMCE.init({
                mode: "exact"
                , elements: notesID
                , theme: "advanced"
                , theme_advanced_toolbar_location: "top"
                , theme_advanced_toolbar_align: "left"
                , theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect|,help"
                , theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor"
                , theme_advanced_buttons3: ""
                , plugins: "inlinepopups"
                , dialog_type: "modal"
            });
        }

        function removeEditor() {
            if (tinyMCE.getInstanceById(notesID) != null && tinyMCE.getInstanceById(notesID) != "undefined")
                tinyMCE.remove(tinyMCE.getInstanceById(notesID));
        }

This works well for me since I also need to run other script when the mode switches (removed from the above code for clarity), so ties in neatly. The CurrentMode element is simply a Label control set in server code.

This did the trick for me.

I used this script:

 
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);

function endRequestHandler(sender,args)
{
    tinyMCE.idCounter=0;
    tinyMCE.execCommand('mceAddControl',false,'htmlContent');
}

function beginRequestHandler(sender,args)
{
}

function UpdateTextArea()
{ 
    tinyMCE.triggerSave(false,true);
}
 

Because I used an ASP.NET button on my page, I had to add this in the page_load of my form:

    protected void Page_Load(object sender, EventArgs e)
    {
        Button1.Attributes.Add("onclick", "UpdateTextArea()");
    }

Hi  "MeijerMartijn"

   Thanks a lot for such a simle solution.

   I had just copied and pasted your scipt and it started working for me.

  Thanks again.

Regards

Ulfat Hussian