如何在TinyMCE中制作带浮动按钮的流畅工具栏？

Question

我有一个基本的TinyMCE设置，我正在尝试创建一个“流动”工具栏，如果工具栏太小，按钮会下拉到下一行。我把所有按钮放在一个表格行中：

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

我已经尝试了各种的CSS来实现这一点，我不知道为什么这不起作用：

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

我正在寻找的是这样的事情（调整输出窗格的大小）：http://jsfiddle.net/vKTcq/

您可以在此处试用我的TinyMCE演示：http://fiddle.tinymce.com/aecaab/1

我知道我以前只用CSS做过这个，所以我很确定它是可能的 - 我似乎无法弄明白。有什么想法吗？

Answer 1

Aha，发现它，white-space属性在工具栏中的所有内容，默认外观以及大多数其他外观中都设置为nowrap。使用此CSS覆盖它：

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

我不确定哪些特定的元素确实需要white-space修复，但这非常有效。

演示：http://fiddle.tinymce.com/becaab

使用较小工具栏的示例输出（按钮现在将堆叠而不是关闭屏幕）：

Answer 2

我猜您的问题或多或少等于这个问题：TinyMCE: How to display all toolbars on a single row? 看看接受的答案。