サポート » プラグイン » TinyMCE Advanced カスタマイズについて(再)

  • はじめまして。
    どうしても解決策が見つからず、再度投稿をさせていただきました。
    申し訳ございません。

    ビジュアルエディタの画面に独自のスタイルプルダウンを追加したいのですが、
    どのようにすればいいのかご教授いただけないでしょうか。

    やりたいことは、「スタイル」プルダウンのような独自のメニューを追加して、
    選択したスタイルを本文に適用したいということで、プルダウンリストは
    日本語で、リストのスタイルは独自の css から参照する。

    できれば、function.php か プラグインで対応したいです。

    WebTecNote様の下記記事「セレクトメニューの追加」の個所
    http://tenderfeel.xsrv.jp/wordpress/350/
    を参考にやってみましたが、エディタ画面には何の変化もなく
    うまくいきませんでした。
    「TinyMCEのビジュアルリッチエディタにカスタムボタンを追加する」は、
    うまくいきましたが。。。

    皆様、どうかお知恵をお貸しくださいませ。m(__)m

    どうぞよろしくお願い申し上げます。

    バージョン: TinyMCE Advanced 3.2.7

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • メニューに関しては、PHPの例文がありませんが、

    PHPの

    array_push($buttons, "separator", "Table01");

    array_push($buttons, "separator", "myCustomMenu");

    に、

    $plugin_array['SampleButtons'] = get_bloginfo('wpurl') .'/wp-content/themes/original/editor_plugin.js';

    $plugin_array['CustomMenu'] = get_bloginfo('wpurl') .'/-適切なパス-/editor_plugin.js';

    に変更すればOKかと思います。

    トピック投稿者 hamachan

    (@hamachan)

    redcocker様、ありがとうございます。
    半ば諦めかけててたところでしたので、
    とてもうれしいです。

    さて、ご教授の通りに、変更してみましたが、
    ビジュアルエディタ画面には表示さてませんでした。

    まず、functions.php に下記を追加。
    — ここから —
    class SampleMceMenu {

    function SampleMceMenu() {
    add_action(‘init’, array(&$this, ‘addbuttons’));
    }
    function sink_hooks(){
    add_filter(‘mce_plugins’, array(&$this, ‘mce_plugins’));
    }

    function addbuttons() {
    //編集権限なければスルー
    if ( ! current_user_can(‘edit_posts’) && ! current_user_can(‘edit_pages’) )
    return;

    //リッチエディタの時だけ追加
    if ( get_user_option(‘rich_editing’) == ‘true’) {
    add_filter(“mce_external_plugins”, array(&$this, ‘mce_external_plugins’));
    add_filter(‘mce_buttons’, array(&$this, ‘mce_buttons’));
    }
    }

    function mce_Menus($menus) {
    //追加するボタンの名前(separatorは区切り)
    array_push($menus, “separator”, “myCustomMenu”);
    return $menus;
    }

    // TinyMCE プラグインファイルを読み込む: editor_plugin.js (wp2.5)
    function mce_external_plugins($plugin_array) {
    //プラグイン関数名=ファイルの位置
    $plugin_array[‘SampleButtons’] = get_bloginfo(‘wpurl’) .’/wp-content/themes/ra9-demo-a/editor_plugin.js’;
    return $plugin_array;
    }
    }
    $mymenu = new SampleMceMenu();
    add_action(‘init’,array(&$mymenu, ‘SampleMceMenu’));
    — ここまで —

    テーマフォルダに editor_plugin.js を追加。
    — editor_plugin.js 内容 —
    (function() {
    tinymce.create(‘tinymce.plugins.CustomMenu’, {
    getInfo : function() {
    return {
    longname : ‘TinyMCE Custom Select-Menu Sample’,
    author : ‘Tenderfeel’,
    authorurl : ‘http://tenderfeel.xsrv.jp’,
    infourl : ‘http://tenderfeel.xsrv.jp’,
    version : “1.0”
    };
    },
    createControl: function(n, cm) {
    switch (n) {
    case ‘myCustomMenu’:
    var mlb = cm.createListBox(‘myCustomMenu’, {
    title : ‘カスタムメニュー’,
    onselect : function(v) {
    tinyMCE.activeEditor.execCommand(‘mceInsertContent’, false, v);
    }
    });

    //<option>
    mlb.add(‘サンプル1’, this._Sample1());
    return mlb;
    }
    },
    //挿入されるコンテンツ
    _Sample1 : function(d, fmt) {
    fmt = ‘Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.\n\n’;
    return fmt;
    }
    });
    tinymce.PluginManager.add(‘CustomMenu’, tinymce.plugins.CustomMenu);
    })();
    — ここまで —

    以上です。

    それと、「スタイル」プルダウンのような独自のメニューを追加して、
    選択したスタイルを本文に適用したい。プルダウンリストは日本語で、
    リストのスタイルは独自の css から参照する。

    みたいなことも可能なのでしょうか。
    「リストのスタイルは独自の css から参照」が無理な場合は、
    editor_plugin.js に直接記述するということができればいいのですが。

    お手数をおかけして申し訳ございませんが、
    どうかご教授のほどよろしくお願いいたします。m(__)m

    長くなってすみません。

    上記のリストのとおり追加されたとすれば、

    $plugin_array['SampleButtons'] = get_bloginfo('wpurl') .'/wp-content/themes/ra9-demo-a/editor_plugin.js';

    の行の変更を忘れておられるのではないでしょうか?

    正しくは、

    $plugin_array['CustomMenu'] = get_bloginfo('wpurl') .'/wp-content/themes/ra9-demo-a/editor_plugin.js';

    です。

    それから、私が過去に作ったものは、ボタンを押すと、サブウィンドウが開いて、そのウインドウで選択してと言った動作になり、少し異なりますが、選択したテキストをタグで囲んで整形させることは可能です。

    “editor_plugin.js”で、プルダウンメニューを作るのではなく、サブウインドを生成するPHPを読み込むような動作をさせていますが、このPHPで生成したサブウインドウは、独立したページですのでCSSを読み込み成形することも可能です。私の作ったものは、CSSは読み込んでいませんが、このサブウインドウで選択部分をタグで囲むJavaスクリプトを読み込んでいます。

    私が作成したものは、下記ですが、

    SyntaxHighlighter TinyMCE Button

    参考にされるなら

    CodeColorer TinyMCE Button

    の方がシンプルで分かりやすいと思います。
    フルスクリーンモードで動作しないバグがありますが、今のところ解決方法は分かっていません。

    トピック投稿者 hamachan

    (@hamachan)

    redcocker様、ご返信ありがとうございます。

    $plugin_array[‘CustomMenu’] = get_bloginfo(‘wpurl’) .’/wp-content/themes/ra9-demo-a/editor_plugin.js’;
    としてみましたが、変化なしで何も表示されませんでした。

    また、サンプルプラグインもありがとうございます。
    両プラグインをインストールしてみましたが、
    こちらもビジュアルエディタには変化なしでした。

    CodeColorer TinyMCE Button
    をfunction.phpへ組み込んでみたら、ボタンは表示されたのですが、
    サブウィンドウでログイン画面が表示されて、ID、パスを入れても
    認証されませんでした。

    いろいろお手数をおかけして、申し訳ございません。

    お時間のあるときで構いませんので、
    ヒントをいただければありがたいです。。。

    どうぞよろしくお願い申し上げます。m(__)m

    私の環境はWordpess 3.1.3ですが、「CodeColorer TinyMCE Button」も問題なく動作しています。

    「TinyMCE Advanced 3.3.9.2」も使っておりますが、有効、無効に関わらず、2つのプラグイン共に動作しています。

    「CodeColorer TinyMCE Button」は、本来はボタンを押すと、ウインドウが開き、認証が発生するようなものではありませんので、何か、別の問題がありそうな気もしますが、「カスタムボタン」の方は成功されているので「カスタムメニュー」も行けそうな気がするのですが・・・。

    リストの方、クラスや関数名も変更されていますが、私の見た限り、対応する箇所も変更されているので問題ないと思うのですが、念のため「カスタムメニュー」をプラグイン化してみました。私の環境で動作確認済みです。

    1.「tinymce-custom-menu.php」を作成。
    サンプルからの変更点は、ご案内した2箇所で、既に変更済みです。

    <?php
    /*
    Plugin Name: TinyMCE Custom Button Sample
    Plugin URI: http://tenderfeel.xsrv.jp
    Description: TinyMCEのリッチエディタにカスタムボタンを追加するサンプルソース
    Author: Tenderfeel
    Version: 0.1
    Author URI: http://tenderfeel.xsrv.jp
    */
    class SampleMceButton {
    	function SampleMceButton() {
    		add_action('plugins_loaded', array(&$this, 'Initalization'));
    	}
    	function sink_hooks(){
    		add_filter('mce_plugins', array(&$this, 'mce_plugins'));
    	}
    	function Initalization() {
    		add_action('init', array(&$this, 'addbuttons'));
    	}
    	function addbuttons() {
    		//編集権限なければスルー
    	   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
    		 return;
    	   //リッチエディタの時だけ追加
    	   if ( get_user_option('rich_editing') == 'true') {
    		 add_filter("mce_external_plugins", array(&$this, 'mce_external_plugins'));
    		 add_filter('mce_buttons', array(&$this, 'mce_buttons'));
    	   }
    	}
    	function mce_buttons($buttons) {
    	   //追加するボタンの名前(separatorは区切り)
    	   array_push($buttons, "separator", "myCustomMenu");
    	   return $buttons;
    	}
    	// TinyMCE プラグインファイルを読み込む: editor_plugin.js (wp2.5)
    	function mce_external_plugins($plugin_array) {
    	   //プラグイン関数名=ファイルの位置
    	   $plugin_array['CustomMenu'] = get_bloginfo('wpurl') .'/wp-content/plugins/tinymce-custom-menu/editor_plugin.js';
    	   return $plugin_array;
    	}
    }
    $mybutton = new SampleMceButton();
    add_action('init',array(&$mybutton, 'SampleMceButton'));
    ?>

    2.「editor_plugin.js」を作成。
    例と全く同じです。

    (function() {
    	tinymce.create('tinymce.plugins.CustomMenu', {
    		getInfo : function() {
    			return {
    				longname : 'TinyMCE Custom Select-Menu Sample',
    				author : 'Tenderfeel',
    				authorurl : 'http://tenderfeel.xsrv.jp',
    				infourl : 'http://tenderfeel.xsrv.jp',
    				version : "1.0"
    				};
    		},
    		createControl: function(n, cm) {
    		  switch (n) {
    			case 'myCustomMenu':
    				var mlb = cm.createListBox('myCustomMenu', {
    					 title : 'カスタムメニュー',
    					 onselect : function(v) {
    						 tinyMCE.activeEditor.execCommand('mceInsertContent', false, v);
    					 }
    				});
    				//<option>
    				mlb.add('サンプル1', this._Sample1());
    				return mlb;
    		  }
    		},
    		//挿入されるコンテンツ
    		_Sample1 : function(d, fmt) {
    			fmt = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.\n\n';
    			return fmt;
    		}
    	});
    	tinymce.PluginManager.add('CustomMenu', tinymce.plugins.CustomMenu);
    })();

    3.2つのファイルを「tinymce-custom-menu」フォルダに収めて、/wp-content/plugins/にアップロードし、管理画面から「TinyMCE Custom Button Sample」を有効にする。

    別のボタンと競合するような形で、一方のボタンが表示されない現象を経験したこともありますが、フックする時のプライオリティを明示的に指定しており、プライオリティーが同一場合に発生しやすいように思います。

    サンプルの場合は、プライオリティが省略されており、デフォルト値が割り当てられていますが、他のボタンと競合している可能性も否定出来ないので、他にボタンを追加するプラグインをインストールされていましたら、無効にしてみるのも良いかもしれません。

    動作しない件と直接関係はないですが、「TinyMCE Advanced」がインストールされていない環境でIE9を使用しますと、「カスタムメニュー」をクリックすると中身のメニューが思わぬ場所に表示されますが、これで正常です。

    「CodeColorer TinyMCE Button」は、「window.php」の10行目当たりまで、何やらトリッキーな処理が行われていますので、function.phpに組み込むとおかしな動作になるのは、そのためかもしれません。

    原型は留めておりませんが「SyntaxHighlighter TinyMCE Button」も、「CodeColorer TinyMCE Button」のコピーからスタートしており、この部分の記述は、最初から気になっていたのですが、すっかり忘れており、直していませんでした。

    トピック投稿者 hamachan

    (@hamachan)

    redcocker様、いろいろありがとうございます。
    感激しております。

    もう、無理かなぁ~~と諦めかけてましたが、
    もう少し頑張ってみます。

    明日、経過報告いたします。

    どうぞよろしくお願い申し上げます。m(__)m

    トピック投稿者 hamachan

    (@hamachan)

    redcocker様、おはようございます。

    本日早速、ご教授いただいた「tinymce-custom-menu」を組み込み有効化、
    ちゃんとセレクトメニューがビジュアルエディタ画面に表示され、
    ガッツポーズ!!です。(^^♪

    本当にありがとうございます。

    あと、セレクトメニューを選択したときに
    .blue-text-box {
    background-color: #ccffff;
    padding: 15px;
    margin-bottom: 10px;
    }
    のクラスを
    <span class=”blue-text-box”>選択した文字</span>
    という感じで、適用できればベストなのですが。。。

    「editor_plugin.js」内でそういった記述は可能でしょうか?

    何から何まで本当に申し訳ございません。
    どうぞよろしくお願い申し上げます。

    おめでとう御座いいます。

    あと、セレクトメニューを選択したときに
    .blue-text-box {
    background-color: #ccffff;
    padding: 15px;
    margin-bottom: 10px;
    }
    のクラスを
    <span class=”blue-text-box”>選択した文字</span>
    という感じで、適用できればベストなのですが。。。

    「editor_plugin.js」内でそういった記述は可能でしょうか?

    難しそうな気がしますが、私の知識では、出来るとも出来ないとも判断が使いないですね。

    選択した部分を整形されるとのことなので、メニューから選択されると、テキストが入力されるのではなく、選択部分をタグで囲むJavaスクリプトを読み込むような動きになると思いますが、この部分も考えないといけないですね。

    もっとも、似たような動作のプラグインはありそうに思いますし、真似してしまえば良いかと。

    トピック投稿者 hamachan

    (@hamachan)

    redcocker様、ありがとうございます。

    いろいろ調べてみましたが、難しそうですね。
    ただ、一つ参考になりそうなページがあったんですが、
    やっていることはなんとなくわかるんですが、それを応用して
    となるとチンプンカンプン
    http://www.bit-hive.com/~tomita/RangeEncap/

    JavaScriptのソース:encap.js

    function encapHTMLForMozilla(encap_node)
    {
    // iframeのwindowを取得
    var win = document.getElementById(‘frame’).contentWindow;

    var selection = win.getSelection();

    var range = selection.getRangeAt(0);

    range.surroundContents(encap_node);
    }

    function encapHTMLforIE(encap_node)
    {
    // iframeのdocument,windowを取得
    var win = frames[‘frame’].window;
    var doc = frames[‘frame’].document;

    win.focus();

    var range = doc.selection.createRange();

    var container = document.createElement(“div”);
    container.appendChild(encap_node);
    encap_node.innerHTML = range.htmlText;

    try {
    range.pasteHTML(container.innerHTML);
    } catch (e) {
    alert(e);
    }
    }

    function encapHTML()
    {
    var node = document.createElement(“font”);
    node.setAttribute(“size”, “7”);

    if (document.all) {
    encapHTMLforIE(node);
    } else {
    encapHTMLForMozilla(node);
    }
    }

    「editor_plugin.js」に応用できればいいのですが。

    どうぞよろしくお願い申し上げます。

    まぁ、そんな感じなんですが、TinyMCE特有の処理もあるので、参考にされるならTinyMCE用に作られたものが良いと思います。

    オリジナルのTinyMCEには、「plugins」フォルダに(TinyMCE用の)プラグインがソース付きで収まっていますので、お作りになるものに近いものがあれば参考になると思います。

    http://tinymce.moxiecode.com/

    WordPressのプラグインとしても、TinyMCE用のプラグインが結構出ていますので、参考になるものがあるかもしれません。
    選択部分のテキストを取得して表示するスクリプトの例なども収まった「example」フォルダも参考になるかもしれませんね。

    選択に部分にタグ挿入する程度、加えて、属性の追加や変更が出来るものは、ごく普通にあると思いますので、そのまま真似してしまうことも難しくないとないと思います。

    大方の「タグを追加するタイプのボタン」の動きは、選択されたテキストを取得し、入力フォームから属性を取得し、テキストに属性付きのタグを足して書き込んでいるだけです。

    加えて、もし選択したテキストに都合が悪いものが含まれるなら、「replace」で置換するなどの処理が必要になる程度かと。

    TinyMCE特有の処理の部分は、分かり難いですが、基本動作が目的とするプラグインと同じものをベースにすれば、弄らなくても良いとも言えます。

    私も全然分からなかったですし、今も大して分かってないですが、こんな感じでプラグインを作りました。

    トピック投稿者 hamachan

    (@hamachan)

    redcocker様、いろいろとありがとうございました。
    少しずつ勉強して自分でやってみようと思います。

    今回の件は、まったくわからなかったことと、
    期限があったので、無理なお願いをしてしまいました。
    本当にすみません。

    今後ともどうぞよろしくお願いいたします。

    一点、書いたことで訂正させて下さい。

    別のボタンと競合するような形で、一方のボタンが表示されない現象を経験したこともありますが、フックする時のプライオリティを明示的に指定しており、プライオリティーが同一場合に発生しやすいように思います。

    サンプルの場合は、プライオリティが省略されており、デフォルト値が割り当てられていますが、他のボタンと競合している可能性も否定出来ないので、他にボタンを追加するプラグインをインストールされていましたら、無効にしてみるのも良いかもしれません。

    と書きましたが、過去の競合パターンを見直してみると、プライオリティが同一か否かに関わらず、競合は起きるようです。

    感覚的な話ですが、

    add_filter('mce_buttons', array(&$this, 'mce_buttons'), 5);

    とプライオリティを明示的に指定していたところを

    add_filter('mce_buttons', array(&$this, 'mce_buttons'));

    と省略してデフォルト値とした事で、競合を解消できるケースがありました。

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • トピック「TinyMCE Advanced カスタマイズについて(再)」には新たに返信することはできません。