6

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

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

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

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

4

4 回答 4

6

每行按钮都包裹在一个表中，因此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;编辑器全屏模式的截图，三行按钮都在一行，并排

在此处输入图像描述

于 2012-07-09T12:35:40.247 回答
3

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

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

 table.mceToolbar {margin-left:3px; float:left}
于 2013-11-29T15:45:42.750 回答
1

这仅使用 css 不起作用，因为不同的行有自己的 table 元素。您可以做的是在tinymce 初始化之前检查用户屏幕的宽度。根据此值，您可以设置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" : "",
    ...
});
于 2012-07-09T12:38:01.100 回答
0

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

$('[id^=tinyelement_toolbar]').css('display','inline-table')
于 2013-04-27T21:20:22.337 回答