How to resize toolbars and buttons in tinyMCE

Question

I created an editor page, and I'm trying to increase the size of the toolbar and buttons, This is what I tried

What i need below

Is there any way to do this in tinyMCE, any help is greatly appreciated!

Answer 1

By default, TinyMCE accepts only 20px by 20px icons on the toolbar. If you want the custom toolbar icon to be more than 20 pixels, you will need to edit ui.css in TinyMCE. Edit ui.css ( tiny_mce / themes / advanced / skins / default / ui.css ) and change the following values:

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

Change the width and height as you want.

Answer 2

JQuery approach: When you execute the following command in the console browser,

 $('a[role=button]') 

You will have 20px. So, you can follow these instructions:

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