WordPress3.9 で TinyMCE に追加したボタンが動作しない じぇじぇじぇ

WordPress が version 3.9 になって、TinyMCE4 へバージョンアップされた影響がいろいろあるようです

作成中の Celtis-one テーマでも、先日 TinyMCE に pre コード挿入用の機能を設けたのですが、それが ver3.9 だと動作していません (^_^;)

エディタのツールバー部分の表示もフラット表示になっていません

ボタン表示がフラットでない

他のテーマに切り替えるとフラットに表示されていますが、Celtis-one テーマだけ表示が古いままです

思い当たることといえば、先日パフォーマンスをアップしようと思い ver を消していたのでした (^_^;)

参考:WordPressでJSとかに自動付与される?ver=xを消してみる

ということで、とりあえず is_admin() でチェックして管理モードでは ver を消さないようにしたところフラットに表示されるようになりました (^^)

ただし直ったのは表示だけです

追加したボタンが表示されない

TinyMCE4のメジャーバージョンアップで使用していた機能が使えなくなったようです

日本語の資料が見つけられなかったので、とりあえず TinyMCE Documentation から該当している部分のドキュメントを再確認してみます

TinyMCE4-plugin

 まずは API 3.x  tinymce.Plugin を見てみます

Example として表示されるコード例

// Create a new plugin class
tinymce.create('tinymce.plugins.ExamplePlugin', {
    init : function(ed, url) {
        // Register an example button
        ed.addButton('example', {
            title : 'example.desc',
            onclick : function() {
                 // Display an alert when the user clicks the button
                 ed.windowManager.alert('Hello world!');
            },
            'class' : 'bold' // Use the bold icon from the theme
        });
    }
});

// Register plugin with a short name
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);

// Initialize TinyMCE with the new plugin and button
tinyMCE.init({
   ...
   plugins : '-example', // - means TinyMCE will not try to load it
   theme_advanced_buttons1 : 'example' // Add the new example button to the toolbar
});

このコードに近い記述を確かにしています

次に API 4.x  tinymce.Plugin を見てみます

Example として表示されるコード例

tinymce.PluginManager.add('example', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('example', {
        text: 'My button',
        icon: false,
        onclick: function() {
            // Open window
            editor.windowManager.open({
                title: 'Example plugin',
                body: [
                    {type: 'textbox', name: 'title', label: 'Title'}
                ],
                onsubmit: function(e) {
                    // Insert content when the window form is submitted
                    editor.insertContent('Title: ' + e.data.title);
                }
            });
        }
    });

    // Adds a menu item to the tools menu
    editor.addMenuItem('example', {
        text: 'Example plugin',
        context: 'tools',
        onclick: function() {
            // Open window with a specific url
            editor.windowManager.open({
                title: 'TinyMCE site',
                url: 'http://www.tinymce.com',
                width: 800,
                height: 600,
                buttons: [{
                    text: 'Close',
                    onclick: 'close'
                }]
            });
        }
    });
});

違いは、Ver3では plugin のクラスを create してから PluginManager に add していたところが、Ver4 では create せずに PluginManager に直接 add するように変わったところです

ドキュメントからは詳細はわかりませんが、見よう見まねで修正してみます (^_^;)

  tinymce.PluginManager.add('celtisone_pre_plugin', function(editor, url) {
    editor.addButton('celtisone_pre', {
        title: 'Celtis-one : pre code',
        //text: 'pre code',
        icon: false,
        image: button_image,
        onclick: function() {
            var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
            W = W - 80;
            H = H - 84;
            tb_show( 'Celtis-one : pre code', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=pre-code-form' );
        }
    });
  });

動作させてみると無事に動きました
この部分の修正だけで、他の部分は今までどうりでOKでした (^^)

addButton のところで指定している text / icon / image によりツールバーへの表示をテキスト、アイコン、イメージから簡単に指定できるようです

コードも前よりシンプルになり見やすくなりました

ちなみに、変更したコードで WordPress3.9 以前のバージョンでもボタンイメージが表示され問題なく動作しています

今回修正したのと同じように、ちょっとした機能を TinyMCE に追加しているプログラムを記述している場合は意外と今回のバージョンアップで影響を受けている人がいるかも知れません

参考になれば幸いです (^^)

 

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss