TinyMCEボタンの追加やエディターのアレンジ方法を紹介

著者 Nora
日付
カテゴリー カスタマイズ
タグ

TinyMCE エディタ 編集

プラグイン「WP Theme ShapeShifter Extensions」のアップデートでついにTinyMCEボタンを追加したのですが、自分でも出来るようにTinyMCEのビジュアルエディター用の編集ボタンの追加方法などについて少し紹介してみようと思います。

今回のプラグインのアップデートで追加した機能についても、結構簡単に作成できると思いますので、自分で便利なボタンを増やしたいという方はぜひボタン作成に挑戦してみてください。

TinyMCEはJavaScriptですので、PHPよりもJavaScriptが得意な人は簡単に出来るんじゃないでしょうか？　少なくとも僕みたいに手こずったりはしないと思いますよ。

  • Table of Contents

 TinyMCEボタンの追加

ボタンを追加するだけなら、実は結構簡単に出来てしまいます。

ええ、マジです。

まず最初の手順としては、

  1. 基本的なフレームを作成
  2. 機能を追加
  3. ボタンの追加

という基本的な部分に触れていきます。

ええ、まずはボタンがちゃんと機能するようにしていきますが、この部分は大体ワードプレスの参照ページにも載っていると思うので、結構簡単だとは思います。

ただ、TinyMCEはPHPではなくJavaScriptで書く部分が多いので、ワードプレスの参照ページよりもTinyMCEのページを見た方が役に立つことは多いです。

 

 まずは基本的なフレーム

ボタンを追加する為に必要な、PHPで書かなくちゃいけないことがいくつかあります。

まずは

# check if WYSIWYG is enabled
	if ( 'true' == get_user_option( 'rich_editing' ) ) {
		add_filter( 'mce_external_plugins', 'your_mce_external_plugins' );
		add_filter( 'mce_buttons', 'your_mce_buttons' );
	}

# mce_external_plugins
	function your_mce_external_plugins( $plugin_array ) {
		$plugin_array[ 'shapeshifter_button' ] = YOUR_TINYMCE_JAVASCRIPT_FILE;
		return $plugin_array;
	}
# MCE Button
	function your_mce_buttons( $buttons ) {

		array_push( $buttons, 'shapeshifter_button' );
		return $buttons;

	}

この例ではボタンの値に”shapeshifter_button”を使っていますが、好きに編集してください。あと、「YOUR_TINYMCE_JAVASCRIPT_FILE」という定数を用いていますが、これは後で書いていくJavaScriptをファイルをURLを書いておきましょう。「plugins/url/to/your/tinymce.js」といった感じです。

また、注意点としてですが、ユーザー情報（ビジュアルエディターが使用できるか）を上のコードでチェックしていますが、最初のifはユーザー情報がセットされているタイミングで使用してください。例えば、「admin_head」などのフックなどで呼び出すなどで、

add_action( 'admin_head', 'your_admin_head' );
function your_admin_head() {

	# check if WYSIWYG is enabled
		if ( 'true' == get_user_option( 'rich_editing' ) ) {
			add_filter( 'mce_external_plugins', 'your_mce_external_plugins' );
			add_filter( 'mce_buttons', 'your_mce_buttons' );
		}
	
}

こんな形にすると良いと思いますが、別にチェックしないのであれば、以下のように「add_filter」２つをそのまま書いておけば大丈夫です。

add_filter( 'mce_external_plugins', 'your_mce_external_plugins' );
add_filter( 'mce_buttons', 'your_mce_buttons' );

 

次に、ボタンのスタイルを付けます。

CSSファイルを読み込むなど方法は何でも良いのですが、以下の形でスタイルを書いておきます。

i.mce-i-shapeshifter_button:before {
    content: "SS";
}

「mce-i-ボタン名」というクラスを持つiタグが追加されるようにしていきます。僕は「shapeshifter_button」を追加しますので、この形にしてアイコンの代わりに「SS」だけを出力しています。

TinyMCEボタン「SS」追加
TinyMCEボタン「SS」追加

こんな感じにする予定です。

PHP側では側ではこれだけで十分ですので、次に「YOUR_TINYMCE_JAVASCRIPT_FILE」に追加したJavaScriptファイルを用意していきます。

 

 機能の追加

まずは必要な部分を先に書きます。上の「YOUR_TINYMCE_JAVASCRIPT_FILE」に用意したJavaScriptファイルを開いてください。

( function( $ ) {

    tinymce.PluginManager.add( 'shapeshifter_button', function( editor, url ) {

        // ここにコードを書いていく。

    });

} ) ( jQuery );

「tinymce.~」というのはTinyMCEのコードで、tinymceに必要なJavaScriptファイルはワードプレスが用意してくれているので、それを使っていきます。

TinyMCEではこのラッパー内に用意された「editor」というオブジェクトが持つメソッドを使って機能を追加します。処理の定義は「addCommand」で行い、処理の実行は「execCommand」というメソッドを使います。そして、メソッド「insertContent」でボタンによるコンテンツの挿入を行います。

例としては、

// 処理を定義するコード
editor.addCommand( "your_command", function( e, data ) {

    // コンテンツを挿入するコード
    editor.insertContent( data.name.toString() );

});

// 処理を実行するコード
editor.execCommand(
    "your_command",
    e,
    {
        "name": "Your Name"
    }
);

こんな感じでコマンドを実行すると、「Your Name」が貼り付けられると思います。

ただ、実際メソッド「execCommand」はボタンのクリックイベントで読まれるようにしますので、直接「tinymce.PluginManager.add~」のラッパー内に書かないようにしてください。次の「ボタンの追加」の項目で方法を書きます。

 

ボタンの追加

「tinymce.PluginManager.add~」のラッパー内に以下のコードを書いていきます。

editor.addButton( "shapeshifter_button", {
    tooltip: "ShapeShifer Button",
    onclick: function( e ) {
        // ボタンをクリックした時の処理
        editor.execCommand(
            "your_command",
            e,
            {
                "name": "Your Name"
            }
        );
    }
});

「tooltip」はホバーさせた時に表示されるテキストで、「onclick」にクリック時の処理を書いてやります。このクリック時の処理の中で、先ほどメソッド「addCommand」で追加した処理を「execCommand」で実行すれば、ボタンとして機能するようになります。

あとは、処理内容を編集するだけです。

 

ビジュアルエディターのスタイルに関して

ビジュアルエディターで上手くCSSが機能させるには、ワードプレスの関数「add_editor_style」でCSSファイルを読む必要があります。ビジュアルエディターはiframeタグで出力されているので、こちらで出力するようにしましょう。

「admin_init」にフックさせて呼び出せばOKです。

また、ビジュアルエディターのCSSは、テーマなどのコンテンツ部分のスタイルをコピペして、ラッパーのセレクタを指定している場合は「body.wp-editor」などのセレクタに書き換えれば良いと思います。

 

ポップアップ関連

ボタンをクリックした際、ポップアップして挿入するコンテンツの設定を行いたい場合もあります。というかそのパターンが多いと思います。

var editorWindow = editor.windowManager.open({
    title: "",
    items: {
        type: "container",
        layout: "flex",
        direction: "row",
        padding: 0,
        spacing: 0,
        items: [
            {
                type: "container",
                minWidth: 600,
                minHeight: 200,
                html: '<textarea name="text1" class="textarea"></textarea>'
            },
            {
                type: "container",
                minWidth: 200,
                minHeight: 200,
                html: '<textarea name="text2" class="textarea"></textarea>'
            }
        ]
    },
    buttons: [
        {
            text: "Insert",
            onclick: function( e ) {

                editor.insertContent( "whatever" );
                editorWindow.close();

            }
        }
    ]
});

意味もなくテキストエリアをポップアップさせるコードなんですが、コマンドの処理内容にこれを入れておくことで、ボタンを御した時などにポップアップさせ、ポップアップウィンドウに用意したボタンをクリックすることでコンテンツが挿入されるように設定することが出来ます。

このウィンドウを変数に入れておくことで、メソッド「close」を使うことでウィンドウを閉じることが出来ます。

変数を定義した後、以下のようにウィンドウのホルダーになるオブジェクトを作っておけば、ウィンドウを全て閉じることが出来るようにも出来ます。

var popupWindowHolder = {
    popupWindows: [],
    set: function( popupWindow ) {
        this.popupWindows.push( popupWindow )
    },
    closeAll: function() {
        _( this.popupWindows ).each( function( popupWindow ) {
            popupWindow.close();
        })
    }
};

使い方は、以下のようにコードを付け足します。

var editorWindow = editor.windowManager.open({ ~~~ });
popupWindowHolder.set( editorWindow );

あとは、「閉じる」ボタンなどのクリックアクションで「popupWindowHolder.closeAll()」を呼び出すだけです。

 

ポップアップでワードプレスのエディターを使用する方法

エディターで設定しているのに、さらにエディターをポップアップさせる必要があるのかという根本的な疑問が浮かぶかもしれませんが、カラム毎の編集をするのに便利なんですよ。

ただ、ワードプレス関数に「wp_editor」があり、これをAJAXで呼び出す方法が見受けられるんですが、JavaScriptコードまでは引っ張ってこれませんので、結局中途半端な状態になってしまいますので、ボタンなども正常に使用可能なエディターを呼び出すようにします。

// tinyMCE Settings
    tinyMCEGlobalSettings =  tinyMCEPreInit.mceInit.content; // ワードプレスで設定されたTinyMCEの設定
    tinyMCEGlobalSettings.selector = "#sseditor"; // TinyMCEを使用したいテキストエリアのセレクタを指定
    tinyMCEGlobalSettings.height = "200px"; // 高さを指定

// tinyMCE Initialize
    tinymce.init( tinyMCEGlobalSettings ); // TinyMCEを初期化

// Editor Contents
    var editorContents = decodeURIComponent( content ); // 初期値として
    $editorBody = $( 'iframe#sseditor_ifr' ).contents().find( 'body' );
    $editorBody.html( editorContents ); // 初期値としてコンテンツを挿入

結構ざっくり書いていますので、微調整が必要かもしれませんが、「tinyMCEPreInit.mceInit.content」がワードプレスの設定値と分かれば随分エディターを呼び出すのが楽だと思います。必要に応じて設定値を編集すれば使いやすいエディターになるんじゃないでしょうか？

 

ビジュアルエディターと実際に出力されるHTMLの調整方法

一番面倒な部分かも知れませんが、ビジュアルエディタ上で編集するのに便利な方法がいくつかあり、ビジュアルエディタ上でのみ表示させたいクリック可能な要素を用意するとします。

例えば、プラグイン「WP Theme ShapeShifter Extensions」のアップデートで追加したカラム設定のように、出力するHTMLには含みたくないが、特定のクリックしてポップアップさせるなどできるようにしたい場合などです。

そこで覚えておくと便利なのが、ビジュアルエディタにセットされるのに使われる「BeforeSetcontent」と出力されるHTMLをセットするのに使われる「GetContent」というイベントです。

// ビジュアルエディター用に変換
    editor.on( 'BeforeSetcontent', function( event ){

        event.content = getContentOnVisualEditor( event.content );

    });

// 出力用のHTMLに変換
    editor.on( 'GetContent', function( event ){

        event.content = getContentForHTMLEditor( event.content );

    });

「event.content」という値が表示されるHTMLとなりますので、これの値を編集してやるだけでOKです。

一番楽なのが、ラッパー内に初期値を入れてから、jQueryでセレクタを指定して編集し、最後にメソッド「html()」で取得できる値を「event.content」に定義する方法でしょうか。

まぁ別に方法は慣れている方法で良いと思います。

その他の情報

一応参照ページがあるんですが、「TinyMCE | The Most Advanced WYSIWYG HTML Editor」でもっと詳しく知ることが出来ると思います。

ただ、ワードプレスの方は基本的にはあまり多く書かれていない気がします。フィルターフックなどで初期設定値を変えることとかは出来るんですが、僕としてはJavaScriptで直接編集するのが一番じゃないかと思っています。というかそれ以外にない気がします。

一応まだ機能の追加は随時行っていくのですが、実際に最新版の「WP Theme ShapeShifter Extensions」には、これらのコードを使ったTinyMCEが使われていますので参考になればと思います。

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。