2012-09-13 48 views
5

Tôi đã thiết lập TinyMCE cơ bản và tôi đang cố gắng tạo thanh công cụ "chất lỏng" với các nút thả xuống dòng tiếp theo nếu thanh công cụ quá nhỏ. Tôi đã có tất cả các nút trong một dòng của bảng duy nhất:Làm cách nào để tạo thanh công cụ chất lỏng với các nút nổi trong 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" 
}); 

Tôi đã thử tất cả các loại của CSS để đạt được điều này, tôi không chắc chắn lý do tại sao điều này sẽ không làm việc:

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

những gì tôi đang tìm kiếm là một cái gì đó như thế này (thay đổi kích thước cửa sổ đầu ra): http://jsfiddle.net/vKTcq/

Bạn có thể thử nghiệm với TinyMCE demo của tôi ở đây: http://fiddle.tinymce.com/aecaab/1

Tôi biết tôi đã làm điều này trước đây với CSS một mình, vì vậy tôi khá chắc chắn nó có thể - tôi chỉ có thể không có vẻ để tìm ra nó. Bất kỳ ý tưởng?

Trả lời

6

Aha, tìm thấy nó, thuộc tính white-space được đặt thành nowrap trên mọi thứ trên thanh công cụ, trong da mặc định cũng như hầu hết các giao diện khác. Sử dụng CSS này để ghi đè nó:

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

Tôi không chắc chắn mà cụ yếu tố thực sự cần sửa chữa white-space, nhưng hoạt động này một cách hoàn hảo.

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

Ví dụ đầu ra với một thanh công cụ nhỏ hơn (các nút bây giờ sẽ ngăn xếp thay vì đi tắt màn hình):

enter image description here

Các vấn đề liên quan