tinymce vue 部分工具不显示,TinyMCE：如何在单行上显示所有工具栏？

I have a TinyMCE editor where I have buttons specified via theme_advanced_buttons1, theme_advanced_buttons2 and theme_advanced_buttons3. Each toolbar row is designed to be pretty short to make sure that the layout will not overflow horizontally.

Is there a way to get toolbars to reposition on a single line if they can all fit? (E.g. visitor has a wide-screen display and the browser window is maximized.)

I'm thinking it could be possible via CSS by settings display:block and float:left to toolbar rows (the tr elements). Perhaps add clear: left to some (which?) following element to prevent overflowing to editor area. However, this seems like an ugly hack. I'm hoping you can come up with something better.

解决方案

Each line of buttons is wrapped in a table so theme_advanced_buttons1 is inside a table, theme_advanced_buttons2 is inside another table and theme_advanced_buttons3 is inside another one, so to make them inline you can use

.wp_themeSkin table.mceToolbar {

margin: 0 6px 2px; // this is by default

display: inline-table; // this is extra I've added to keep them in single line

}

Below is a screenshot of display: inline-table; in full screen mode of the editor, all three lines of buttons are in one line, side by side