WordpressでカスタムTinyMCEボタンを作る方法ホバー上でアイコンを変更する

Question

Youtubeビデオを挿入するためのWordpressエディタ用のTinyMCEプラグインを作成しました。このボタンにはホバー状態がありません（デフォルトのボタンのように）。私はコードを調べて違いを見つけました - デフォルトのボタンはバックグラウンドイメージスプライトのスパンで、私のカスタムボタンは普通の画像です。

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

この小さな問題を解決する方法はあります：スパン、画像のみを挿入するTinyMCEのaddButton()機能にはオプションはありませんか？

（赤YouTubeのアイコンがグレーにし、ホバーに赤に変わります）、それがどのように見えるか説明するために：

http://d.pr/aszC

Answer 1

あなたに渡すことができる追加のパラメータがあります。 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を使用します。

ボタンだけをターゲットにするために使用できるもう1つのトリックがあります。 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; } 

Answer 2

を私はCrayon Syntax Highlighterプラグインは、これを行うために管理していることに気づきました。読めるコードは少しありますが、私はtinyMCE固有の部分が/wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.jsにあります。私はこれが役立つことを願っています

ハイライトは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のアイコンと同じサイズを使用しています。