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

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

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

※WordPress 3.9以上

Base64 な画像が消え去る

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

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

テキストエディタのみでやればいけるんですけども、ビジュアルエディタに切り替えた時点で 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行目のやつを足せばいいです。

 

Base64 画像を挿入してみる

本当にできるかどうか確認。

はい、できました。

実際に挿入してみたのがこちら↓

 

ホホまとめ

Base64な画像を投稿で使う場面があったので調べて実装できました。

ドキュメントを読めばだいたいのことはできるようになってきてうれしい。


投稿日

カテゴリー:

投稿者:

コメント

“WordPressビジュアルエディタでBase64画像を使えるようにする方法” への3件のフィードバック

  1. ooiooiooi0313 Avatar

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

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

コメント、してみません?