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

我为Wordpress编辑器创建了TinyMCE插件来插入Youtube视频。除了这个按钮没有悬停状态（就像默认的按钮一样），一切都正常。我研究了代码，发现了一个不同之处——默认按钮是背景图像精灵的跨距，而我的自定义按钮是普通图像。TinyMCE

addButton（）

函数中没有插入跨度的选项，只有图像：

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

有办法解决这个小问题吗

要演示其外观（红色Youtube图标应为灰色，并在悬停时变为红色）：

我注意到插件已经成功做到了这一点。这是一段需要通读的代码，我在/wp content/plugins/crayon syntax highlighter/util/tag editor/crayon_tinyMCE.js中找到了tinyMCE特定的部分。我希望这有帮助

导致高亮显示的样式是：

图像使用与其他TinyMCE图标相同的大小：

---

您可以将其他参数传递给addButton方法，这些参数为您提供了一些按钮蒙皮方式的选项

如果删除

图像

属性并将其替换为

图标

，则可以使用字体化图标。这是一个多步骤的过程，从实际构建图标字体开始。这将引导您完成整个过程。本教程作者建议将其作为构建图标字体的可靠方法。可能还有其他的

我使用的方法类似于@feonix83的方法，而是使用CSS。按照WordPress本身的方式，您可以将图标放置在精灵表中，“悬停”状态比“关闭”状态高20px。如果你不知道我在说什么，请看一下defalt WordPress图标精灵页面：

wp includes/images/wpicons.png

如果您完全删除

image

属性，TinyMCE只会在按钮锚块内放置一个class

mceIcon

范围。然后很容易设置该元素的样式，并使用

背景图像

引用您的精灵表。使用

背景位置

设置相应图标的偏移量

还有一个额外的技巧，你可以用来帮助你只针对你的按钮。您可以将

class

属性添加到

addButton

调用中，并传递任意数量的类。您需要手动指定一个特定的类，该类可用于指定该按钮的特定目标，但您也可以传入一个额外的类，该类可用于同时设置所有按钮的样式，因为它们不会自动继承WordPress使用的样式

类：“我的按钮我的特定按钮”

这是我使用的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; }

---

sry。你没有解决办法，担心不会有one@Thariama，谢谢你的回复。我刚刚在TinyMCE支持论坛上问了同样的问题。如果有什么解决办法，我会找到的，我会把它贴在这里。哈哈，很高兴能帮上忙：P

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