Come posso creare una barra degli strumenti fluida con pulsanti mobili in TinyMCE?

Question

Ho una configurazione di base di TinyMCE e sto cercando di creare una barra degli strumenti "fluida" con pulsanti che scendano alla riga successiva se la barra degli strumenti è troppo piccola. Ho tutti i pulsanti in una sola riga della tabella:

tinyMCE.init({ 
    mode : "textareas", 
    theme : "advanced", 
    plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager", 
    theme_advanced_buttons1 : "bold,italic,justifyleft,justifycenter,justifyright,justifyfull," 
     +"styleselect,formatselect,fontselect,fontsizeselect,bullist,numlist,link,unlink,image,pdw_toggle," 
     +"pastetext,pasteword,search,replace,outdent,indent,blockquote,undo,redo,code,forecolor,backcolor," 
     +"tablecontrols,hr,removeformat,visualaid,sub,sup,charmap,emotions,media,advhr,print,ltr,rtl,fullscreen," 
     +"cite,abbr,acronym,del,ins,attribs,visualchars,nonbreaking,template,blockquote,insertfile,insertimage,underline,strikethrough", 
    theme_advanced_buttons2 : "", 
    theme_advanced_buttons3 : "", 
    theme_advanced_buttons4 : "", 
    theme_advanced_toolbar_location : "top", 
    width: "100%", 
    height: "400" 
}); 

Ho provato tutti i tipi di CSS per raggiungere questo obiettivo, io non sono sicuro perché questo non funziona:

.mceToolbar tr { 
    display:block !important; 
    width:100% !important; 
} 
.mceToolbar td { 
    clear:none !important; 
    display:block !important; 
    float:left !important; 
} 

Quello che sto cercando è qualcosa di simile (ridimensionare il riquadro di uscita): http://jsfiddle.net/vKTcq/

si può sperimentare con il mio TinyMCE demo qui: http://fiddle.tinymce.com/aecaab/1

So di averlo fatto prima con i CSS da solo, quindi sono abbastanza sicuro che sia possibile - proprio non riesco a capirlo. Qualche idea?

Answer 1

Aha, trovato, la proprietà white-space è impostata su nowrap su tutto nella barra degli strumenti, nello skin predefinito e nella maggior parte delle altre skin. Utilizzare questa CSS per ignorarlo:

.mceToolbar * { 
    white-space: normal !important; 
} 
.mceToolbar tr, 
.mceToolbar td { 
    float:left !important; 
} 

Non sono sicuro che specifici elementi veramente bisogno la correzione white-space, ma questo funziona perfettamente.

Demo: http://fiddle.tinymce.com/becaab

uscita Esempio con una barra degli strumenti più piccolo (i pulsanti ora impilare invece di andare fuori dallo schermo):

Answer 2

Credo che la tua domanda più o meno uguale a questa domanda SO : TinyMCE: How to display all toolbars on a single row? Controlla la risposta accettata.