如何在tinyMCE中更改工具栏和按钮大小

Question

我已经创建了一个编辑器页面，我正在尝试增加工具栏和按钮的大小， 这就是我尝试过的

我想要的是下面的

有没有办法在tinyMCE中执行此操作，感谢任何帮助！

Answer 1

默认情况下，TinyMCE仅接受工具栏中 20px 20px 的图标。如果要创建宽度超过20像素的自定义工具栏图标，则需要在TinyMCE中编辑ui.css。编辑ui.css（ tiny_mce / themes / advanced / skins / default / ui.css ）并更改以下值：

.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; width:20px; height:20px}
.defaultSkin .mceButton {display:block; border:1px solid #F0F0EE; width: 20px; height:20px; margin-right:1px}

根据需要更改宽度和高度值。

Answer 2

JQuery方法： 在控制台浏览器上执行以下指令时，

$('a[role=button]') 

你将有20px 因此，您可以执行以下操作：

$('a[role=button],img.mceIcon,span.mceIcon').css({'width':'30px','height':'30px'})
$('img.mceIcon,span.mceIcon').css('margin','2px')