プラグインを作成せずにボタンをTinyMCEバーに追加する


8

TinyMCEリッチテキストエディターにカスタムボタンを1つまたは2つ追加しようとしています。これまでに見たチュートリアルは時代遅れであるか、カスタムプラグインでそれを行う方法を説明しています。プラグインを作成せずに、おそらくfunctions.phpファイルの代わりにこれを行うにはどうすればよいですか?具体的<h2></h2>には、本文にaを追加する「h2」ボタンを追加します。

回答:


9

これはほとんどコードゴルフですが、これは、ビジュアルエディター上にボタンを作成して<h2>ブロック内の現在の段落を回転させることができるコードの中で最小のものです。

add_filter( 'tiny_mce_before_init', 'wpse18719_tiny_mce_before_init' );
function wpse18719_tiny_mce_before_init( $initArray )
{
    $initArray['setup'] = <<<JS
[function(ed) {
    ed.addButton('h2', {
        title : 'H2',
        image : 'img/example.gif',
        onclick : function() {
            ed.formatter.toggle( 'h2' );
        }
    });
}][0]
JS;
    return $initArray;
}

add_filter( 'mce_buttons', 'wpse18719_mce_buttons' );
function wpse18719_mce_buttons( $mce_buttons )
{
    $mce_buttons[] = 'h2';
    return $mce_buttons;
}

これはTinyMCEコードサンプルに基づいており、トリックを使用して関数をsetup変数として渡します(これは3.2では不要になります)。

HTMLエディターにボタンを追加するには、次の追加のJavaScriptファイルをエンキューすることで、はるかに単純な「クイックタグ」コードを拡張できます。

jQuery( function( $ ) {
    var h2Idx = edButtons.length;
    edButtons[h2Idx] = new edButton(
        'ed_h2'  // id
        ,'h2'    // display
        ,'<h2>'  // tagStart
        ,'</h2>' // tagEnd
        ,'2'     // access
    );
    var h2Button = $( '<input type="button" id="ed_h2" accesskey="2" class="ed_button" value="h2">' );
    h2Button.click( function() {
        edInsertTag( edCanvas, h2Idx );
    } );
    // Insert it anywhere you want. This is after the <i> button
    h2Button.insertAfter( $( '#ed_em' ) );
    // This is at the end of the toolbar
    // h2Button.appendTo( $( '#ed_toolbar' ) );
} );

ファービーHTMLエディターで同じことをするにはどうすればよいですか?どうもありがとう!!!
フィリップ

2
@フィリップ:それはとても簡単なことだ。エンキューする必要があるコードを追加のJavaScriptとして追加しました。
Jan Fabry、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.