Como adicionar um botão de código curto ao editor TinyMCE?

34

Como fazer qualquer ícone de plugin no wordpress post? O código que quero inserir no código do plugin e aparecerá na barra de postagens [wp-admin / post.php].

Como esta imagem:

insira a descrição da imagem aqui

Saída: se eu clicar no ícone, ele automaticamente grava [plugin]no conteúdo da postagem como este:

insira a descrição da imagem aqui

Juan Lie
fonte
Adicione uma captura de tela do resultado que você deseja obter. Não está claro o que você quer.
fuxia
Eu acho que você deseja criar um plugin que adiciona um botão TinyMCE ao editor que insere um código de acesso do WordPress, certo?
developdaly

Respostas:

65

Para adicionar nosso botão ao editor TinyMCE, precisamos fazer várias coisas:

  1. Adicione nosso botão à barra de ferramentas
  2. Registrar um plug-in TinyMCE
  3. Crie o plug-in TinyMCE que informa ao TinyMCE o que fazer quando o botão é clicado.

Passos # 1 e # 2

Nestas etapas, registramos nosso plug-in TinyMCE, que ficará dentro de um arquivo javascript em 'path/to/shortcode.js'(veja wpse72394_register_tinymce_plugin()abaixo)

 // init process for registering our button
 add_action('init', 'wpse72394_shortcode_button_init');
 function wpse72394_shortcode_button_init() {

      //Abort early if the user will never see TinyMCE
      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
           return;

      //Add a callback to regiser our tinymce plugin   
      add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); 

      // Add a callback to add our button to the TinyMCE toolbar
      add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}


//This callback registers our plug-in
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpse72394_button'] = 'path/to/shortcode.js';
    return $plugin_array;
}

//This callback adds our button to the toolbar
function wpse72394_add_tinymce_button($buttons) {
            //Add the button ID to the $button array
    $buttons[] = "wpse72394_button";
    return $buttons;
}

Etapa 3

Agora precisamos criar nosso plug-in TinyMCE. Isso irá em um arquivo 'path/to/shortcode.js'(conforme especificado nas etapas anteriores).

jQuery(document).ready(function($) {

    tinymce.create('tinymce.plugins.wpse72394_plugin', {
        init : function(ed, url) {
                // Register command for when button is clicked
                ed.addCommand('wpse72394_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if( selected ){
                        //If text is selected when button is clicked
                        //Wrap shortcode around it.
                        content =  '[shortcode]'+selected+'[/shortcode]';
                    }else{
                        content =  '[shortcode]';
                    }

                    tinymce.execCommand('mceInsertContent', false, content);
                });

            // Register buttons - trigger above command when clicked
            ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' });
        },   
    });

    // Register our TinyMCE plugin
    // first parameter is the button ID1
    // second parameter must match the first parameter of the tinymce.create() function above
    tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});
Stephen Harris
fonte
11
Na etapa 1, alterar o initgancho para admin_initgancho também pode economizar um pequeno processamento extra no front-end.
Tim Malone
Depende, você também pode ter o TinyMCE no front-end. Mas sim, se esse for apenas o lado do administrador, admin_initseria preferível.
Stephen Harris
5

Há muita coisa para colocar aqui a resposta inteira, então confira este guia: http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

Você deve criar um arquivo Javascript que execute uma ação a partir do botão registrado através do WordPress, que insere o botão TinyMCE no editor.

developdaly
fonte
3
Usa query_posts, então talvez não seja o melhor exemplo para vincular.
111114 Brad