Javascript TinyMCE：如何在一行上显示所有工具栏？

这个问题基本上是相反的

我有一个TinyMCE编辑器，其中有通过theme_advanced_按钮1、theme_advanced_按钮2和theme_advanced_按钮3指定的按钮。每个工具栏行都设计得非常短，以确保布局不会水平溢出

如果工具栏都适合，是否有办法让它们在一行上重新定位？（例如，访问者有一个宽屏显示，浏览器窗口最大化。）

---

我认为可以通过CSS将

display:block

和

float:left

设置为工具栏行（元素

tr

）。也许可以将

clear:left

添加到下面的某些元素（哪个？），以防止溢出到编辑器区域。然而，这似乎是一个丑陋的黑客。我希望你能想出更好的办法。

每行按钮都包装在一个表中，因此

主题高级按钮1

在一个表中，

主题高级按钮2

在另一个表中，

主题高级按钮3

在另一个表中，因此可以使用它们进行内联

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

下面是显示的屏幕截图：内联表在编辑器的全屏模式下，所有三行按钮并列在一行中

---

仅因为不同的行有自己的表元素，所以使用css无法实现这一点。 您可以做的是在tinymce初始化之前检查用户屏幕的宽度。 根据此值，您可以设置主题高级按钮1和主题高级按钮2等

例如：

var width = screen.width;

tinyMCE.init({
mode: 'exact',
    ....

    theme_advanced_buttons1 : width < 1024 ? "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter" : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : width < 1024 ? "justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect" : "",
    ...
});

var-width=screen.width；
tinyMCE.init({
模式：“精确”，
....
主题_高级_按钮1：宽度<1024？“保存，新建文档，|，粗体，斜体，下划线，删除线，|，左对齐，中间对齐”：“保存，新建文档，|，粗体，斜体，下划线，删除线，|，左对齐，中间对齐，右对齐，完全对齐，|，样式选择，格式选择，字体选择，字体大小选择”，
theme_advanced_按钮2：宽度<1024？“JustifRight，JustifFull，|，styleselect，formatselect，fontselect，fontsizeselect:”，
...
});

在javascript代码中添加此Jquery行：

$('[id^=tinyelement_toolbar]').css('display','inline-table')

---

根据启用的按钮数量，将table.mceToolbar设置为“显示内联表格”可能会使编辑器的宽度过宽

相反，将每个表格向左浮动，这样当达到最大允许宽度时，它就会中断

 table.mceToolbar {margin-left:3px; float:left}

---

谢谢，但你知道，这是一个每天都能教给我们新东西的地方，至少我总是从中学到东西，直到你死了，学习才结束。最好的方法：-）使用

display:inline table

或

display:inline block

似乎可以在第一行获取工具栏。但是，至少在Firefox和Chrome中，如果窗口太窄（或者在TinyMCE编辑器可见时使其变窄），包装不会返回到多行显示。对你有用吗？我认为这个问题是由于工具栏

table

元素之间没有空格，彼此紧跟在一起，因此浏览器看不到工具栏部分之间有换行的机会。它可以工作，但会溢出包装器div，将所有表放在一行中。