WordPressビジュアルエディタでBase64画像を使えるようにする方法

近頃 TinyMCE にはまってますどうも。

Base64 な画像を WordPress で使おうとし、テキストエディタに入力→ビジュアルエディタに切り替えをすると消え去ったので、調べて使えるようにしました。

※WordPress 3.9以上

Base64 な画像が消え去る

どういうことか、やってみましょう。

ビジュアルエディタからメディアを追加→URLにBase64な画像のsrcを入力→投稿に挿入

WordPress ビジュアルエディタ→メディアを追加

WordPress ビジュアルエディタ→メディアを追加→URLから挿入

WordPress ビジュアルエディタ Base64画像が反映されない

テキストエディタのみでやればいけるんですけども、ビジュアルエディタに切り替えた時点で TinyMCE の自動整形がかかって消えちゃうんですね～

WordPress の TinyMCE で Base64 を使えるようにする

TinyMCE のドキュメントを見る、発見。

これを WordPress のフックで有効にしてやります。

/**
 * WordPressビジュアルエディタでBase64画像を使えるようにする
 *
 * @author    hayashikejinan
 * @copyright Copyright (c) 2014, hayashikejinan
 * @link      /?p=1193
 * @license   http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 *
 * @param $settings
 *
 * @return mixed
 */
function enable_base64_image_for_tiny_mce( $settings ) {
	$settings['paste_data_images'] = true;

	return $settings;
}

add_filter( 'tiny_mce_before_init', 'enable_base64_image_for_tiny_mce' );

既に tiny_mce_before_init へのフックがあれば 14行目のやつを足せばいいです。