markursino
  • 0
Новичок

Добавить кнопку на панель TinyMCE без создания плагина

  • 0

Я пытаюсь добавить пользовательскую кнопку или две в текстовый редактор TinyMCE. Учебники, которые я видел до сих пор, либо устарели, либо объясняют, как это сделать с помощью специального плагина. Как я могу сделать это, не создавая плагин, возможно functions.php, вместо этого в файле? Чтобы быть конкретным, я хочу добавить кнопку «h2», которая будет добавляться в <h2></h2> тело.

Share
  1. Это почти гольф кода, но это самый маленький фрагмент кода, который я мог бы создать, который создаст кнопку в визуальном редакторе, чтобы превратить текущий абзац в <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' ) );
    } );
    
    • 0

Оставить ответ

You must login to add an answer.