1

Topic: MS AJAX updatepanel solution

I seen a few post on having trouble with using TinyMCE with MS AJAX update panels.
After a partial page postback TinyMCE will disappear and you will have a normal textarea again.

Here is how to correct this issue.

add a js function to your page

<script type="text/javascript">
function InitTiny()
{
tinyMCE.execCommand('mceAddControl', false, 'txtContent');
tinyMCE.execCommand('mceAddControl', false, 'txtAddAnnoucement');
}   
</script>


replace the last parameter with the name of your control


Now in your code on what ever is causing the partial post back
add this to the function
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "init", "InitTiny();", true);

update the parameter names as necessary



or if you only have 1 control using the editor, you can call the tinyMCE.execCommand  function in your code behind directly.

Last edited by chazcross (2007-02-14 23:51:56)

2

Re: MS AJAX updatepanel solution

i try this on IE it's working fine, but it's not working on FF. any idea.

3

Re: MS AJAX updatepanel solution

I can't get that to work in either FF or IE.

Here's the code:
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js" ></script>
<script language="javascript" type="text/javascript" >
    tinyMCE.init({mode : "textareas",theme : "advanced",plugins : "safari,style,table,save,advhr,advimage,advlink,preview,contextmenu,paste,fullscreen,visualchars,nonbreaking,template",theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,forecolor,backcolor,styleprops,formatselect,fontselect,fontsizeselect",theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,undo,redo,|,justifyleft,justifycenter,justifyright,justifyfull,|,outdent,indent,|,link,unlink,anchor",theme_advanced_buttons3 : "bullist,numlist,|,advhr,nonbreaking,charmap,|,sub,sup,|,image,|,visualaid,visualchars,removeformat,cleanup,|,code,preview,|,fullscreen,template,|,help",theme_advanced_buttons4 : "tablecontrols",theme_advanced_toolbar_location : "external",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,editor_deselector : "mceNoEditor",editor_selector : "mceAdvanced",force_br_newlines: false, convert_newlines_to_brs: false,force_p_newlines: false,template_external_list_url : "jscripts/defaulttemplatelist.js"});tinyMCE.init({mode : "textareas",theme : "advanced",plugins : "safari,style,table,save,advhr,advimage,advlink,preview,searchreplace,contextmenu,paste,fullscreen,visualchars,nonbreaking,template,fullpage",theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,forecolor,backcolor,styleprops,formatselect,fontselect,fontsizeselect",theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,justifyleft,justifycenter,justifyright,justifyfull,|,outdent,indent,|,link,unlink,anchor",theme_advanced_buttons3 : "bullist,numlist,|,advhr,nonbreaking,charmap,|,sub,sup,|,image,|,visualaid,visualchars,removeformat,cleanup,|,code,preview,|,fullscreen,template,fullpage,|,help",theme_advanced_buttons4 : "tablecontrols",theme_advanced_toolbar_location : "external",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,editor_selector : "mceFull",force_br_newlines: false, convert_newlines_to_brs: false,force_p_newlines: false,template_external_list_url : "jscripts/defaulttemplatelist.js"});tinyMCE.init({mode : "textareas",theme : "advanced",plugins : "safari,style,save,advhr,advlink,contextmenu,paste,visualchars,nonbreaking",theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,forecolor,backcolor,styleprops,formatselect,fontselect,fontsizeselect",theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,undo,redo,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,anchor",theme_advanced_buttons3 : "bullist,numlist,|,advhr,nonbreaking,charmap,|,sub,sup,|,visualaid,visualchars,removeformat,cleanup,|,code,|,help",theme_advanced_toolbar_location : "external",theme_advanced_toolbar_align : "left",force_br_newlines: false, convert_newlines_to_brs: false,force_p_newlines: false,editor_selector : "mceSimple"});
   
    </script>
<script language="javascript" type="text/javascript">
function InitTiny()
{
tinyMCE.execCommand('mceAddControl', false, 'Tabs_tpH_txtRightHeader');
tinyMCE.execCommand('mceAddControl', false, 'Tabs_tpB_txtBody');
}   
</script>


code-behind (VB):
                ScriptManager.RegisterClientScriptBlock(Me.upH, upH.GetType(), "init", "InitTiny();", True)
                ScriptManager.RegisterClientScriptBlock(Me.upB, upB.GetType(), "init", "InitTiny();", True)

I noticed the "init"  - what is that actually referring to?

4

Re: MS AJAX updatepanel solution

ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "init", "InitTiny();", true);

This was the nearest thing to a solution I found but unfortunatly it is not working for me. The RegisterScript executes when PostBack but do not update the textarea to show the toolbar again.

I noted that if I put the ID of any other control on the page in the execCommand it converts it to a TinyMCE control, the only one not working is the one that was already a TinyMCE control.

I tryed the .NET package and it does the same thing.

5

Re: MS AJAX updatepanel solution

I have this page.

If i push the button i lost my tinymce control... Have You a solution?

Thanks!

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <script type="text/javascript" src="console/tiny_mce/tiny_mce.js"></script>
     <script type="text/javascript">tinyMCE.init({ mode: "textareas", theme: "simple" });</script>


</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
         
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" >
            <ContentTemplate>
                 <asp:TextBox ID="TextBox1" TextMode="MultiLine" Height="100px" Width="100px" runat="server" ></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Button"  />
            </ContentTemplate>
    </asp:UpdatePanel>
   
    </div>
    </form>
</body>
</html>

Bat

6

Re: MS AJAX updatepanel solution

I was able to get this working in a simple example for both IE and FF. 

The trick:  The execCommand function needs the rendered clientID for the asp:TextBox, not just the server-side control ID. 

You'll have to muck around with your source to figure out the correct ID, since it's inside an update panel and the source won't show the textarea.   

Here's the ASPX:

<script type="text/javascript" src="/_js/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        tinyMCE.init({mode : "textareas", theme : "advanced"});
        function InitTiny() {tinyMCE.execCommand('mceAddControl', false, 'ctl00_body_content_tbxNoteContent');}   
    </script>   

    <asp:ScriptManager runat="server" ID="sm" />

    <asp:UpdatePanel runat="server" ID="up">
        <ContentTemplate>
            <asp:PlaceHolder runat="server" ID="plh" Visible="false">
                <asp:TextBox runat="server" ID="tbxNoteTitle" /><br />
                <asp:TextBox runat="server" ID="tbxNoteContent" TextMode="MultiLine" Wrap="true" />
            </asp:PlaceHolder>
            <asp:Button runat="server" ID="btn" Text="Show Textarea" />
        </ContentTemplate>
    </asp:UpdatePanel>

And the code-behind:

protected void Page_Init(object sender, EventArgs e)
        {
            btn.Click += new EventHandler(btn_Click);
        }

        void btn_Click(object sender, EventArgs e)
        {
            plh.Visible = true;
            ScriptManager.RegisterClientScriptBlock(up, this.GetType(), "init", "InitTiny();", true);
        }

        protected void Page_Load(object sender, EventArgs e)
        {

        }

Now I just need to get it working in my real-life code.  smile

7

Re: MS AJAX updatepanel solution

I have now come up against two additional problems:
1.  .NET was throwing a validation error ("A potentially dangerous Request.Form value was detected from the client...") from the rich-text formatting, so I have added on some encode and decode functions.
2.  After some more testing I noticed that on subsequent callbacks, the editor got lost, and I was getting a very random "Permission Denied" error on the javascript file.  After some head-scratching I realized that I needed to remove and then re-add the control.  It threw an error when I tried to add it after it was still on the current instance.

New ASPX:

<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        tinyMCE.init({ mode: "textareas", theme: "advanced", setup: "TinySetup" });
        function InitTiny() { tinyMCE.execCommand('mceAddControl', false, 'ctl00_body_content_tbxNoteContent'); }
        function KillTiny() {tinyMCE.execCommand('mceRemoveControl', false, 'ctl00_body_content_tbxNoteContent');}
        function TinySetup(editor) {
            editor.onBeforeSetContent.add(function(editor, o) {o.content = htmlDecode(o.content);});
            editor.onPostProcess.add(function(editor, o) {if (o.set) o.content = htmlDecode(o.content); if (o.get)o.content = htmlEncode(o.content);})
        }

        function htmlEncode(content) {
            content = content.replace(/&/gi, "&").replace(/\""/gi, """).replace(/</gi, "<").replace(/\>/gi, ">");
            return content;
        }

        function htmlDecode(content) {
            content = content.replace(/>/gi, ">").replace(/</gi, "<").replace(/"/gi, "\"").replace(/&/gi, "&");
            return content;
        }

    </script>   

    <asp:ScriptManager runat="server" ID="sm" />

    <asp:UpdatePanel runat="server" ID="up">
        <ContentTemplate>
            <asp:PlaceHolder runat="server" ID="plh" Visible="false">
                <asp:TextBox runat="server" ID="tbxNoteTitle" /><br />
                <asp:TextBox runat="server" ID="tbxNoteContent" TextMode="MultiLine" Wrap="true" />
            </asp:PlaceHolder>
            <asp:Button runat="server" ID="btn" Text="Edit (Show Textarea)" />
            <asp:Button runat="server" ID="btnSave" Text="Save" Visible="false" />
        </ContentTemplate>
    </asp:UpdatePanel>

New CodeBehind:

public partial class z_TinyMceTest : System.Web.UI.Page
    {
        protected void Page_Init(object sender, EventArgs e)
        {
            btn.Click += new EventHandler(btn_Click);
            btnSave.Click += new EventHandler(btnSave_Click);
        }

        void btnSave_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptBlock(up, this.GetType(), "init", "KillTiny();", true);
            plh.Visible = false;  //leave this visible to see what the encode/decode does
            btnSave.Visible = false;
            btn.Visible = true;
        }

        void btn_Click(object sender, EventArgs e)
        {
            plh.Visible = true;
            btnSave.Visible = true;
            btn.Visible = false;
            ScriptManager.RegisterClientScriptBlock(up, this.GetType(), "init", "InitTiny();", true);
        }

        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }

I know there is a .NET package out there, but I've read that it has some flaws, and I think it would still be problematic with updatepanels.  I'm also VERY new to tinymce, so if there are better ways to achieve the desired results, please let me know!