[英]How to apply CSS on custom buttons in tinyMCE active editor popup
I want to add custom CSS in my tinyMCE active editor popup, attaching the screenshot for your reference. 我想在tinyMCE活动编辑器弹出窗口中添加自定义CSS,附上截图供您参考。
below is the reference code: 以下是参考代码:
tinymce.activeEditor.windowManager.open({
title: 'Browse Image Gallery',
file: "data/get_images_tiny.php",
width: 500,
height: 305,
resizable: "no",
inline: "yes",
close_previous: "no",
buttons: [{
text: 'Upload Image from your PC',
onclick: function () {
//do something
}
}, {
text: 'Close',
onclick: 'close'
}]
}
});
The best way to do is to override style, by defining your custom css file. 最好的方法是通过定义自定义css文件来覆盖样式。
Tinymce init Configuration Tinymce init配置
editor_css : 'editor.css'
Then 然后
.defaultSkin span.mce_upload {some_css: css_value}
You can use the .mce-btn button
selector to add custom style for all buttons what has this selector. 您可以使用.mce-btn button
选择器为具有此选择器的所有按钮添加自定义样式。
You found it in the skin.min.css
你在skin.min.css
找到了它
There are also other selectors in it, like .mce-primary button
其中还有其他选择器,例如.mce-primary button
This css is at [path/to/tinymce/]tinymce/js/tinymce/skins/lightgray
这个css位于[path/to/tinymce/]tinymce/js/tinymce/skins/lightgray
where lightgray is the theme name. 其中lightgray是主题名称。
You can also overwrite it in your editor.css
您也可以在editor.css
覆盖它
UPDATE UPDATE
You can add your custom css for your popups like this ( reference ): 您可以为此弹出窗口添加自定义css( 参考 ):
tinyMCE.init({
...
popup_css : "/mypopup.css"
});
You can use like this: 你可以像这样使用:
tinyMCE.activeEditor.windowManager.open({
file : "data/get_images_tiny.php",
title : 'Browse Image Gallery',
width: 500,
height: 305,
resizable: "no",
inline: "yes",
close_previous: "no",
buttons: [{
text: 'Insert',
classes: 'widget btn primary first abs-layout-item',
onclick: 'close',
id: 'insertButton'
}, {
text: 'Close',
onclick: 'close',
}]
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.