Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

TinyMCE et UpdatePanel ASP.net Ajax

TinyMCE est un excellent éditeur WYSIWYG en mode web, j'en ai déjà parlé ici : TinyMCE : une RichTextBox trés évoluée.

Malheureusement, lorsqu'on l'utilise avec des UpdatePanels, il y a plusieurs soucis.

Par exemple, on veut utiliser un éditeur TinyMCE avec un bouton qui affiche le contenu de la TinyMCE.

<asp:ScriptManagerProxy runat="server"> <Scripts> <asp:ScriptReference path="~/js/tiny_mce/tiny_mce.js" /> </Scripts> </asp:ScriptManagerProxy> <cs:Script runat="server"> tinyMCE.init({ mode : 'exact', theme : 'simple', elements : '<%=tbTest.UniqueID%>' }); </cs:Script> <asp:updatepanel runat="server"> <ContentTemplate> <asp:TextBox ID="tbTest" runat="server" TextMode="multiLine" /><br /> <asp:LinkButton ID="Button1" runat="server" Text="preview" /> <hr /> <div> <%=tbTest.Text %> </div> </ContentTemplate> </asp:updatepanel>

Au chargement tout se passe bien, par contre lorsque vous cliquez sur le bouton, l'éditeur disparait et on revient sur un classique textarea. La solution consiste à appeler la méthode tinyMCE.execCommand('mceAddControl', false, 'tbName'); lors de l'AsyncPostback, cette méthode forcera l'éditeur à se redessiner.

void Page_Load(Object sender, EventArgs e) { if(ScriptManager.GetCurrent(Page).IsInAsyncPostBack) { ScriptManager.RegisterStartupScript(this, typeof(temp), "RefreshTiny", String.Format("tinyMCE.execCommand('mceAddControl', false, '{0}');", tbTest.UniqueID), true); } }

Autre cas où il y a un problème : lorsque l'éditeur n'est pas visible depuis le début, mais qu'il le devient seulement après un AsyncPostBack, alors il faudra exécuter un tinyMCE.init({theme:'simple'}); au chargement du document puis, le init de la textbox lorsqu'il devient visible pour la première fois suivis du execCommand à chaque AsyncPostBack :

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server"> <Scripts> <asp:ScriptReference Path="~/js/tiny_mce/tiny_mce_src.js" /> </Scripts> </asp:ScriptManagerProxy> <cs:Script runat="server"> tinyMCE.init({theme:'simple'}); </cs:Script> <asp:UpdatePanel runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:MultiView runat="server" ID="mvTest" ActiveViewIndex="0"> <asp:View runat="server"> On me voit dès le début. </asp:View> <asp:View runat="server"> On me voit seulement après le click <asp:UpdatePanel runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:TextBox ID="tbTest" runat="server" TextMode="multiLine" /><br /> <asp:Button ID="btnPreview" runat="server" Text="preview" OnClick="btnPreview_click" /> <hr /> <div> <%=tbTest.Text %> </div> </ContentTemplate> </asp:UpdatePanel> </asp:View> </asp:MultiView> <asp:Button runat="server" ID="btnToggleView" Text="Change View" OnClick="btnToggleView_click" /> </ContentTemplate> </asp:UpdatePanel>

void Page_Load(Object sender, EventArgs e) { if (!Page.IsPostBack) BindData(); } void btnToggleView_click(Object sender, EventArgs e) { mvTest.ActiveViewIndex = mvTest.ActiveViewIndex == 1 ? 0 : 1; BindData(); } void btnPreview_click(Object sender, EventArgs e) { BindData(); } void BindData() { if (mvTest.ActiveViewIndex == 1) { if ((bool)(ViewState["InitTiny"] ?? true)) { ScriptManager.RegisterStartupScript(this, typeof(temp), "InitTiny", String.Format("tinyMCE.init({{mode:'exact',theme:'simple',elements:'{0}'}});", tbTest.ClientID), true); } ScriptManager.RegisterStartupScript(this, typeof(temp), "RefreshTiny", String.Format("tinyMCE.execCommand('mceAddControl', false, '{0}');", tbTest.ClientID), true); ViewState["InitTiny"] = false; } }

Jusqu'a maintenant il n'y avait rien de compliqué, mais si vous utilisez un LinkButton ou n'importe quel contrôle qui ne fasse pas un vrai submit alors vous allez perdre le contenu de l'éditeur :

<script type="text/C#" runat="server"> void Page_Load(Object sender, EventArgs e) { if (ScriptManager.GetCurrent(Page).IsInAsyncPostBack) { ScriptManager.RegisterStartupScript(this, typeof(temp), "RefreshTiny", String.Format("tinyMCE.execCommand('mceAddControl', false, '{0}');", tbTest.UniqueID), true); } } </script> <asp:Content ContentPlaceHolderID="CPH1" runat="Server"> <asp:ScriptManagerProxy runat="server"> <Scripts> <asp:ScriptReference path="~/js/tiny_mce/tiny_mce.js" /> </Scripts> </asp:ScriptManagerProxy> <cs:Script runat="server"> tinyMCE.init({ mode : 'exact', theme : 'simple', elements : '<%=tbTest.UniqueID%>' }); </cs:Script> <asp:updatepanel runat="server"> <ContentTemplate> <asp:TextBox ID="tbTest" runat="server" TextMode="multiLine" /><br /> <asp:LinkButton ID="Button1" runat="server" Text="preview" /> <hr /> <div> <%=tbTest.Text %> </div> </ContentTemplate> </asp:updatepanel> </asp:Content>

Lorsque vous cliquez sur le lien "preview" l'éditeur sera toujours présent mais il va perdre son contenu. Pour éviter ce problème il faut appeler la méthode tinyMCE.triggerSave(false,true); avant que l'on fasse le postback. On peut donc rajouter cette fonction dans la propriété OnClientClick du LinkButton mais pour être sur que tous les contrôles qui font un postback vont faire appel à cette fonction, il est préférable de faire un hook sur la fonction __doPostBack :

Sys.Application.add_load(function(sender, args){ if (!args.get_isPartialLoad()){ var $CS$__TinyMCE_doPostBack = __doPostBack; __doPostBack = function(eventTarget, eventArgument){ tinyMCE.triggerSave(false,true); $CS$__TinyMCE_doPostBack(eventTarget, eventArgument); } } });

Pour résumer : comment faire fonctionner la TinyMCE avec les UpdatePanels ?

  • exécuter tinyMCE.execCommand('mceAddControl', false, 'tbName'); lors d'un AsyncPostBack pour que la TinyMCE ne disparaisse pas à chaque postback.
  • Utiliser le hook sur la fonction __doPostBack pour ne pas perdre le contenu lorsque l'on fait un postback avec autre chose qu'un bouton
  • Si la TinyMCE est affiché suite à un AsyncPostBack
    • exécuter tinyMCE.init({theme:'simple'}); au chargement de la page
    • exécuter le tinyMCE.init lié à la textbox, lorsqu'elle est visible pour la première fois.
    • exécuter tinyMCE.execCommand('mceAddControl', false, 'tbName'); à chaque AsyncPostBack.
Posted: lundi 15 octobre 2007 23:45 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

minsou a dit :

pas trop de bla bla, que des exemples et du code, encore un article comme je les aime, merci cyril !

# octobre 16, 2007 08:53

Shell a dit :

WYSIWYG et non WISIWIG...Je sais je chipote ;)

Sinon cool l'exemple, tu es à priori un grand fan de l'update panel.

# octobre 16, 2007 09:37

cyril a dit :

merci Shell, j'ai corrigé :-)

# octobre 16, 2007 14:54

ploufs a dit :

Il y a un petit bug quand on clique trop rapide (a répétion) sur un item qui fait un post-back le contenu du textbox disparait ?

# avril 7, 2008 16:20

SuperBouly a dit :

Merci pour ces précisions, tes articles sont clairs et bien présentés.En plus, ça fonctionne à merveille, mais pas sur la tiny 3.0.5. Pourtant, je l'utilise strictement dans les mêmes conditions (dans un userControl). Est-ce que je divague?

# avril 17, 2008 09:40

cyril a dit :

Bonjour, je n'ai jamais utilisé la tiny 3.* je ne sais donc pas où le code ne fonctionne pa.

Bon courage pour trouver le problème :)

# mai 3, 2008 19:51
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01