Adicione o botão de código curto de fechamento automático ao TinyMCE no WP 4.6

11

Estou familiarizado com a criação de códigos de atalho de fechamento automático, como:

// shortcode
function wpse_shortcode_example( $wpse_atts ) {

    // Attributes
    $wpse_atts = shortcode_atts(
        array(
            'foo' => 'bar',
            'width' => '100%',
            'height' => 'auto',
        ),
        $wpse_atts,
        'wpse'
    );

    // Return
    return '<embed 
             src="' . $wpse_atts['src'] . '"
             width="' . $wpse_atts['width'] . '"
             height="' . $wpse_atts['height'] . '";

}
add_shortcode( 'wpse', 'wpse_shortcode_example' );

mas gostaria de começar a adicioná-los ao TinyMCE. Eu fiz várias pesquisas, mas todos os resultados da pesquisa são antigos ou usam uma abordagem que não é mais recomendada:

Eu sei que o desenvolvedor ainda está nos estágios iniciais, mas o Manual do plug-in fala brevemente brevemente sobre os códigos de acesso aprimorados TinyMCE e a API Shortcode e add_shortcode()não menciona o TinyMCE.

Então isso me leva à minha pergunta. Qual é o procedimento básico para transformar um código de acesso automático em um botão clicável no editor TinyMCE?

DᴀʀᴛʜVᴀᴅᴇʀ
fonte
Então, você quer dizer como criar um botão no editor TinyMCE que injeta um código de fechamento automático no conteúdo?
22616 birgire #
1
@ Birgire Sim, eu gostaria de saber a base para integrar um botão personalizado ao TinyMCE que adicionará o código curto ao post visual.
DᴀʀᴛʜVᴀᴅᴇʀ
1
Você conferiu a ótima resposta aqui por @bueltge?
22416 birgire #
@birgire nenhum ele não retornou a partir de minha busca, mas é uma boa Q & A
DᴀʀᴛʜVᴀᴅᴇʀ

Respostas:

14

Começamos adicionando o botão TinyMCE personalizado:

function add_mce_button_custom_em() {
    // check user permissions
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    // check if WYSIWYG is enabled
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'add_tinymce_plugin_custom_em' );
        add_filter( 'mce_buttons', 'register_mce_button_custom_em' );
    }
}
add_action('admin_head', 'add_mce_button_custom_em');

Então declaramos e registramos o novo botão:

// Declare script for new button
function add_tinymce_plugin_custom_em( $plugin_array ) {
    $plugin_array['custom_em'] = get_template_directory_uri() .'/plug/custom-em/custom-em.js';
    return $plugin_array;
}

// Register new button in the editor
function register_mce_button_custom_em( $buttons ) {
    array_push( $buttons, 'custom_em' );
    return $buttons;
}

Por fim, decidimos quais botões (mais sobre os botões podem ser encontrados em Formatação de conteúdo ) que queremos exibir. Obviamente, se você tiver o UX em mente, exibirá apenas alguns deles, por exemplo:

// TinyMCE: TinyMCE choose which buttons you want to display
function myformatTinyMCE( $in ) {
    $in['toolbar1'] = 'styleselect,bold,custom_em,blockquote,hr,aligncenter,link,unlink,spellchecker,undo,removeformat';
    return $in;
}
add_filter( 'tiny_mce_before_init', 'myformatTinyMCE' );

Como você pode ver na add_tinymce_plugin_custom_emfunção, estamos declarando um arquivo javascript dentroget_template_directory_uri() .'/plug/custom-em/custom-em.js'

Portanto, crie o custom-em.jsarquivo e você terá duas maneiras de fazer isso.

Você pode optar pelo seguinte formato de código curto [shortcode foo="" bar=""]ou [shortcode][/shortcode].

Vamos começar com o [shortcode foo="" bar=""]formato:

(function() {
    tinymce.create('tinymce.plugins.custom_em', {
        init : function(ed, url) {
            ed.addButton('custom_em', {
                title : 'Custom EM',
                image : url+'/images/btn_custom_em.png',
                onclick : function() {
                    ed.execCommand(
                        "mceInsertContent",
                        false,
                        "[shortcode foo=\"\" bar=\"\"]"
                    );
                }
            });
        }
    });
    tinymce.PluginManager.add('custom_em', tinymce.plugins.custom_em);
})(); 

Como você pode ver, usamos uma imagem como ícone do botão. Você pode mudar isso para o texto, conforme descrito no exemplo abaixo.

A seguir, é o que usamos em nossa própria plataforma, que envolve a seleção <em class="whatever">hello world</em>:

(function() {
    tinymce.PluginManager.add('custom_em', function( editor, url ) {

        editor.on('init', function(e) {
            this.formatter.register('thetarget', {
                inline : 'em',
                classes : 'whatever'
            });
        });

        editor.addButton('custom_em', {
            text: 'Custom EM',
            icon: false,
            onclick : function() {
                var contents = editor.selection.getContent(),
                tags = jQuery(jQuery.parseHTML(contents)).find('em.whatever').andSelf();
                editor.formatter.toggle('thetarget');
            }
        });
    });
})(jQuery);

Poste resultados e faça edições. O TinyMCE é uma praga e requer dor de cabeça, mas pode ser resolvido de maneira colaborativa.

Christine Cooper
fonte