如何在悬停时使Wordpress中的自定义TinyMCE按钮更改图标

Question

我为Wordpress编辑器创建了TinyMCE插件以插入Youtube视频。一切正常，除了这个按钮没有悬停状态（就像默认按钮一样）。我探索了代码，发现了一个区别 - 默认按钮是带有背景图像精灵的跨度，我的自定义按钮是一个普通的图像。在TinyMCE addButton()函数中没有选项来插入范围，只有图像：

ed.addButton('p2_youtube_button', {
    title : 'Insert Youtube video',
    cmd : 'mceYoutube',
    image: url + '/shortcode-youtube.png'
});

有没有办法解决这个小问题？

说明它的外观（红色Youtube图标应为灰色并在悬停时变为红色）：

http://d.pr/aszC

Answer 1

我注意到Crayon Syntax Highlighter插件设法做到了这一点。这是一些需要阅读的代码，我在/wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js中找到了tinyMCE特定的部分。我希望这会有所帮助。

导致突出显示的样式是here：

.wp_themeSkin span.mce_crayon_tinymce {
    background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
    background-position: -20px 0;
}

图像使用与其他TinyMCE图标相同的尺寸：

Answer 2

您可以传递给addButton方法的其他参数，为您提供一些选项，让您了解如何为按钮设置外观。

如果删除image属性并将其替换为icon，则可以使用font-ified图标。这是一个多步骤的过程，从实际构建您的图标字体开始。 Here's a good tutorial引导您完成整个过程。本教程的作者建议使用IcoMoon作为构建图标字体的可靠方法。可能还有其他人。

我使用的方式类似于@ feonix83的方法，而不是使用CSS。按照WordPress本身的方式，你将你的图标放在一张精灵表中，其中“悬停”状态比“关闭”状态高20px。如果您不知道我在说什么，请查看defalt WordPress图标精灵表：wp-includes/images/wpicons.png

如果完全删除image属性，TinyMCE只会在按钮锚块中放置一个类mceIcon的范围。然后设置该元素的样式并使用background-image引用您的精灵表非常容易。您可以使用background-position设置相应图标的偏移量。

还有一个额外的技巧可以帮助您仅定位按钮。您可以向class调用添加addButton属性，并传递任意数量的类。您需要手动指定特定类可以用于定位该按钮的特定类，但您也可以传入一个可用于一次设置所有按钮样式的附加类，因为它们不会自动继承样式WordPress使用。

class: "my-buttons my-specific-button"

这是我使用的CSS。请注意，当每个按钮都有自己的单独的精灵表时，这种方法效果最好，而不是一次加载所有图标的WordPress方法，尽管这种方法具有一些不容忽视的性能优势：

.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }