Magazine Tecnologia

Integrare TinyMCE con Thickbox

Creato il 12 dicembre 2011 da Mareika @mareikagiacobbi
Mi è capito di dover sviluppare un progetto con finestre modali usate dall'utente per compilare dei form, i quali campi venivano inviati al controller attraverso chiamata AJAX. Per gestire le finestre modali mi sono appoggiato a thickbox Thickbox e ho desciso di adottare come editor WYSIWYG TinyMCE nel quale non entro nel merito dell'installazione.   Per integrare Thickbox non è stato molto complicato, basta includere nella propria pagina i dovuti file CSS e JS, vi riporto in breve come mostrare finestre modali senza troppi sforzi.

Aggiungete nella vostra pagina il div che volete mostrare 

<div id="thickbox_win" style="display:none">Some Text</div>

ora posizionate da qualche parte il link per mostrare la finestra modale

<%= link_to "SHOW", '#', :onclick => "thickbox_win_show()" %>

e aggiungete in application.js il corpo della funzione

function thickbox_win_show(){
	tb_show('Show Thickbox window', '#TB_inline?height=300&width=500&inlineId=thickbox_win','','')
}

questo non fa altro che richiamare la funzione tb_show inclusa nel file thicbox.js, la quale mostra il div thickbox_win. 

Ora all'interno del div thickbox_win ho aggiunto un form che chiama la create del controller containers, ad esempio:

<div id="thickbox_win" style="display:none">
	<% remote_form_for(:container, :url => {:controller => :containers, :action => :create }, :html => { :method => :post } ) do |f| %>
	<%= f.text_area :description, :class => "mceEditor" %>
	<%= f.submit "New" %>
</div>

Perfetto, nella finestra modale vedo la mia textarea in stile WYSIWYG grazie all'aiuto di TinyMCE, ma quando eseguo il submit del form, nell'hash passato al controller il campo :description è vuoto. 

Per aggirare il problema ho dovuto forzare la copia del testo modificato con TinyMCE usando questo metodo

tinyMCE.triggerSave(true,true)

Il form modificato è il seguente

<% remote_form_for(:container, :url => {:controller => :containers, :action => :create }, 
		:before => "tinyMCE.triggerSave(true,true)", 
		:html => { :method => :post } ) do |f| %>

Ora funzionerà tutto alla grande :)


Potrebbero interessarti anche :

Ritornare alla prima pagina di Logo Paperblog

Possono interessarti anche questi articoli :