Usare TinyMCE con gli Update Panel di ASP NET

 
11 ott 2013

TinyMCE è uno dei più popolari editors WYSIWIG liberamente disponibili in internet, ed è largamente utilizzato ed apprezzato per le sue molteplici funzionalità.

Tuttavia, inserirlo e farlo lavorare correttamente all'interno di un Update Panel di ASP.NET risulta davvero un compito arduo, se si cerca di utilizzare i vari componenti "out of the box". I problemi più frequentemente riscontrati sono la mancata generazione del controllo al refresh dell'Update Panel e il relativo mancato salvataggio dei suoi dati al postback.

Vi propongo quella che è stata la mia soluzione (valida per la versione 3.x di TinyMCE), senza naturalmente la pretesa che sia la migliore e con il suggerimento di provare se ciò funziona anche per voi.

Fase 1:

includere normalmente tinyMCE (versione JS puro, non usate l'adattatore jQuery):

<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>

Fase 2:

di seguito un esempio semplificato di potenziale markup ASP.NET

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
	<ContentTemplate>
		<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
		<asp:Button ID="Button1" runat="server" OnClientClick="SalvaMCE()">SALVA</asp:Button>
	</ContentTemplate>
</asp:UpdatePanel>

l'unica cosa da notare a questo punto è la chiamata alla routine JavaScript "SalvaMCE()" che vedremo in seguito.

Fase 3:

Fare in modo che il TinyMCE venga renderizzato a ogni refresh. Senza fare quanto segue, noterete che a ogni AsyncPostback dell'UpdatePanel, l'editor non verrà rigenerato. Bisogna quindi intercettare l'evento End Request del macchinoso sistema realizzato da Microsoft per le chiamate Ajax via ASP.NET. Si tratta del seguente codice javascript, da inserire sempre nella vostra pagina.

function loadCallback(type, value) {
    if (type == "insert_to_editor") {
        value = value.replace(/</gi, "<");
        value = value.replace(/>/gi, ">");
    }
    return value;
}
$(document).ready(function () {     EndRequest(); });   $(window).load(function () {     var prm = Sys.WebForms.PageRequestManager.getInstance();     prm.add_endRequest(EndRequest); });   function EndRequest() {     tinyMCE.init({         mode: "textareas",         theme: "advanced",         cleanup_callback: "loadCallback"     }); }

La chiamata sul ready is occuperà di disegnare l'editor la prima volta, quella sul load tutte le volte successive in cui si verificherà il postback asincrono del pannello. Il load callback serve per formattare correttamente il contenuto da visualizzare nell'editor, se presente. Nell'init del TinyMCE potete mettere tutte le vostre configurazioni necessarie al vostro progetto, qui ho messo quelle di base per questo argomento.

Fase 4:

La fase più cruciale: il salvataggio del contenuto dell'editor al postback. Qui è la parte più "combattuta" in rete, si trovano soluzioni di ogni sorta, molte delle quali ahimè per me non hanno funzionato. Si tratta dello sviluppo della routine SalvaMCE richiamata in precedenza dal pulsante che sarà adibito all'invio dei dati al server. Quello che ho fatto è stato utilizzare jQuery per ciclare su tutti gli editor presenti sulla pagina e copiarne il contenuto nella rispettiva textarea di provenienza. Legare questa routine al pulsante di submit piuttosto che all'evento onSubmit della form principale garantisce una precisa contestualizzazione e il corretto funzionamento anche in caso di utilizzo di MasterPages e UpdatePanels nidificati. Prima di copiare il contenuto, bisogna farne il parsing per convertire i tag in testo semplice, altrimenti il postback di .NET lo interpreterebbe come una potentially dangerous request.

function SalvaMCE() {
    $('textarea').each(function () {
        var id1 = $(this).attr('id');
        var c = tinyMCE.getInstanceById(id1).getContent();
        if (c != '') {
            c = c.replace(/</gi, "<");
            c = c.replace(/>/gi, ">");
            $('#' + id1).val(c);
        }  
    });
}
© Gabriele Pala, 2012-2014. All rights reserved. P.IVA 01137470314 - C.F. PLAGRL77S16L424T | Cell: 320 3334704 | Mail: info@fvg-informatica.it | Strada delle Acacie, 5/A - Staranzano (GO) | Privacy & Cookies
Questo sito non utilizza cookie di profilazione propri. Sono invece utilizzati cookie tecnici e di terze parti per fini operativi, statistici e pubblicitari. Per sapere a cosa servono i cookie e per impostare le proprie preferenze visitare la pagina Privacy & Cookies. Continuando la navigazione o chiudendo questo avviso, acconsenti all'uso dei cookie e ai termini riportati alla pagina Privacy Policy.
OK