5

我有一个基本的 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 做过这个，所以我很确定这是可能的 - 我似乎无法弄清楚。有任何想法吗？

4

1 回答 1

6

啊哈，找到了，该white-space属性设置为nowrap工具栏中的所有内容，默认皮肤以及大多数其他皮肤。使用这个 CSS 覆盖它：

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

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

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

带有较小工具栏的示例输出（按钮现在将堆叠而不是离开屏幕）：

在此处输入图像描述

于 2012-09-13T06:39:31.493 回答