javascript 如何在 tinyMCE 中更改工具栏和按钮大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12947014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the toolbar and button size in tinyMCE
提问by super
I've created a editor page and i'm trying to increase the size of toolbar and button,
This is what I've tried
我创建了一个编辑器页面，我正在尝试增加工具栏和按钮的大小，这就是我尝试过的
What i want is given below
我想要的是下面
Is there any way to do this in tinyMCE, Any help gratefully received!
有什么办法可以在tinyMCE中做到这一点，感谢收到任何帮助！
采纳答案by Fredy
By default, TinyMCE only accepts icons that are 20pxby 20pxin the toolbar. If you want to make a customized toolbar icon that is wider than 20 pixels, you will need to edit the ui.css in TinyMCE. Edit the ui.css (tiny_mce/themes/advanced/skins/default/ui.css) and change the following values:
默认情况下，TinyMCE 只接受工具栏中20pxx 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}
Change widthand heightvalue as you want.
根据需要更改宽度和高度值。
回答by Abdennour TOUMI
JQuery Approach :When you execute the following instruction on console browser,
JQuery 方法：当您在控制台浏览器上执行以下指令时，
$('a[role=button]')
You will have 20px So ,you can do the following instructions :
你将有 20px 所以，你可以做以下说明：
$('a[role=button],img.mceIcon,span.mceIcon').css({'width':'30px','height':'30px'})
$('img.mceIcon,span.mceIcon').css('margin','2px')
