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

Question

这个问题基本上与Is there a way to wrap the toolbar buttons to the next row in TinyMCE if the width of the editor is too small?

相反

我有一个TinyMCE编辑器，我有通过theme_advanced_buttons1，theme_advanced_buttons2和theme_advanced_buttons3指定的按钮。每个工具栏行的设计都非常短，以确保布局不会水平溢出。

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

我认为可以通过CSS将设置display:block和float:left设置为工具栏行（tr元素）。也许将clear: left添加到某些（哪个？）后面的元素，以防止溢出到编辑器区域。然而，这似乎是一个丑陋的黑客。我希望你能想出更好的东西。

Answer 1

按钮的每一行都包含在一个表中，因此theme_advanced_buttons1位于表格内，theme_advanced_buttons2位于另一个表格中，theme_advanced_buttons3位于另一个表格内，因此要使它们内联，您可以使用

.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;的屏幕截图，所有三行按钮都在一行中并排显示

Answer 2

根据启用的按钮数量，将table.mceToolbar设置为显示内联表可以将编辑器的宽度推得太宽。

而是将每个表格向左浮动，以便在达到最大允许宽度时中断。

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

Answer 3

这只能使用css，因为不同的行有自己的表元素。 您可以做的是在初始化之前检查用户屏幕的宽度。 根据此值，您可以设置theme_advanced_buttons1和theme_advanced_buttons2等...

示例：

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" : "",
    ...
});

Answer 4

在您的javascript代码中添加此Jquery行：

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