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.