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

Question

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

我想要的在下面给出

有没有办法在 tinyMCE 中做到这一点，感谢您的帮助！

Answer 1

默认情况下，TinyMCE 只接受工具栏中 20 x 20像素的图标。如果您想制作一个宽度超过 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')