WYSIWYGをカスタマイズしてスタイルの付与を作る際に少しつまづいたので覚書き。

こいつのスタイルの付与そのものはコードもありふれているし、tiny_mce_before_initにフックすることで簡単にできる。

だけど、今までブロックレベルだとかインラインレベルでしかスタイルの付与をやっていなかったもんだから、ある特定の要素にcssでのclassを直接付与するということをやろうとした際に、「あれ？これどうやるんだ？」となった。

 

実際のところでやりたかったこととしては、aタグに対してのみ、cssの特定のclassである.buttonを追加したいということ。

 

基本的と言えば基本的なところである・・・普段あーやこーやと考えている割にはなんとも情けない。

 

通常、ブロックレベルとかインラインレベルでやる場合、このコードは以下のようにやってやればいいんだけど・・・

function theme_rewrite_tiny_mce_before_init( $init ) {

	$arguments = array(
		array( 'title' => __( 'Block', 'theme-lang' ), 'block' => 'div', 'classes' => 'block' ),
		array( 'title' => __( 'Inline', 'theme-lang' ), 'inline' => 'span', 'classes' => 'inline' ),
		// ↓この部分
		array(
			'title'   => __( 'Button', 'theme-lang' ),
			'inline'   => 'a',
			'classes' => 'button',
		),
		// ↑この部分
	);

	$init['style_formats'] = json_encode( $arguments );

	return $init;

}
add_filter( 'tiny_mce_before_init', 'theme_rewrite_tiny_mce_before_init' );

上記の「この部分」で囲ったところについては、これを設定したとしても特に意味がない。

WYSIWYG側でここで設定しているclassをaタグにかけたとしても、当然無視されてしまうし、それ以前にこれだと書き方だとちょっと拙い。

 

どうしたもんかと悩んで、Codexで他に添字がないかと調べてみたら、なんかそれっぽいselectorとかいう添字を見つけた。

英語の説明文を読んでみると「選択した要素のパターンが合致するときうんとか、クラスを付与するうんとか」と書いてある。

 

ああこりゃ間違いないなと思って、以下のように設定した。

function theme_rewrite_tiny_mce_before_init( $init ) {

	$arguments = array(
		array( 'title' => __( 'Block', 'theme-lang' ), 'block' => 'div', 'classes' => 'block' ),
		array( 'title' => __( 'Inline', 'theme-lang' ), 'inline' => 'span', 'classes' => 'inline' ),
		array(
			'title' => __( 'Button', 'theme-lang' ),
			'selector' => 'a', /* selectorの添字に */
			'classes' => 'button',
		),
	);

	$init['style_formats'] = json_encode( $arguments );

	return $init;

}
add_filter( 'tiny_mce_before_init', 'theme_rewrite_tiny_mce_before_init' );

 

うん。

考えていたスタイルの付与、そっくりそのままうまいことなった。

 

試しにaタグのところでカーソルを置いて、それ以外のカーソル置いたりしてみたが、きちんと前者は設定可能な状態に、後者は設定不可な状態になっていた。

 

わからなかったら最悪いつものごとくソースコード調べるしかねーかと思ったけど、今回はそこまで行かなくてよかった。

 

コードを読むのは楽しいから嫌いじゃないけど、夜が遅いとなるべく避けたいものである。だって眠いと頭入らないし。

（投稿時間が午前1時手前）

 

…お休みなさい。