¿Cómo puedo hacer una barra de herramientas fluida con botones flotantes en TinyMCE?

Question

Tengo una configuración básica de TinyMCE, y estoy tratando de crear una barra de herramientas "fluida" con botones que se despliegan a la siguiente línea si la barra de herramientas es demasiado pequeña. Tengo todos los botones en una sola fila de la tabla:

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" 
}); 

He intentado todo tipo de CSS para lograr esto, no estoy seguro de por qué esto no funcionará:

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

lo que estoy buscando es algo como esto (cambiar el tamaño del panel de salida): http://jsfiddle.net/vKTcq/

Usted puede experimentar con mi demo TinyMCE aquí: http://fiddle.tinymce.com/aecaab/1

Sé que he hecho esto antes solo con CSS, así que estoy bastante seguro de que es posible, parece que no puedo resolverlo. ¿Algunas ideas?

Answer 1

Aha, lo encontró, la propiedad white-space se establece en nowrap en todo en la barra de herramientas, en la máscara predeterminada y en la mayoría de las máscaras. Utilizar este CSS para anularla:

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

No estoy seguro de lo que específicos elementos realmente necesitan el arreglo white-space, pero esto funciona perfectamente.

Demostración: http://fiddle.tinymce.com/becaab

Ejemplo de salida con una barra de herramientas más pequeñas (los botones se acumularán ahora en lugar de ir fuera de la pantalla):

Answer 2

Supongo que tu pregunta más o menos igual a esta cuestión de forma : TinyMCE: How to display all toolbars on a single row? Echa un vistazo a la respuesta aceptada.