TinyMCE：如何在单行上显示所有工具栏？ [英] TinyMCE: How to display all toolbars on a single row?

问题描述

这个问题基本上是与如果编辑器的宽度太小，有没有办法将工具栏按钮包装到TinyMCE的下一行？

我有一个TinyMCE编辑器，其中我有通过theme_advanced_buttons1，theme_advanced_buttons2和theme_advanced_buttons3指定的按钮。

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.)

我认为可以通过设置 display：block 和 float：left 元素）。也许添加 clear：left 到一些（which？）下面的元素，以防止溢出到编辑器区域。然而，这似乎是一个丑陋的黑客。

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.

推荐答案

每行按钮都包含在表格中，所以 theme_advanced_buttons1 在表格内， theme_advanced_buttons2 位于另一个表格内， theme_advanced_buttons3 在另一个里面，所以让他们内联你可以使用

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
}

是在编辑器的全屏模式下的 display：inline-table; 的屏幕截图，所有三行按钮并排在一行

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

这篇关于TinyMCE：如何在单行上显示所有工具栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！