CODEWITHSUNDEEP
wordpresseditorshortcode
user1847051
user1847051

Reputation:

How to add shortcodes in editors' text tab?

Look the below image to get what I mean exactly.

tab text

I know how to add shotcodes into tinymce, but I do not know how to add shortcodes to text tab. I like to add my shortcodes beside the "fullscreen" button. Any solutions?

Upvotes: 1

Views: 1196

Answers (1)

brasofilo
brasofilo

Reputation: 26075

Interesting question, couldn't find any reference here or at WordPress Developers and found the solution on a Japanese page.

In the code, we're triggering the filter hooks only on the pages /wp-admin/post-new.php and /wp-admin/post.php and only for the page post type. 

<?php
/**
 * Plugin Name: (SO) Add buttons to Text mode editor
 * Plugin URI:  http://stackoverflow.com/a/22425171/1287812
 * Description: Based on http://fog-town.net/note/web/addquicktag-unplugged/
 * Author:      brasofilo
 * License:     GPLv3
 */

// Hook only in this admin pages
foreach( array( 'post', 'post-new' ) as $hook )
    add_action( "load-$hook.php", 'setup_so_22396339' );

// Hook only for the 'page'  post type
function setup_so_22396339()
{
    global $typenow;
    if( 'page' !== $typenow )
        return;
    add_filter( 'quicktags_settings', 'quicktags_so_22396339', 10, 2 );
    add_action( 'admin_print_footer_scripts', 'my_quicktags_so_22396339' );
}

// Default buttons (remove buttons from the comma-separated string)
function quicktags_so_22396339( $qtInit, $editor_id ) 
{
    // There's another editor for the Comments box (editor_id == 'replycontent')
    if( 'content' === $editor_id )
        $qtInit['buttons'] = 'link,block,img,ul,ol,li,code,more,spell,close,fullscreen';
    return $qtInit;
}

// Add new buttons
function my_quicktags_so_22396339() 
{ 
    // Don't know how to target only the main content editor. Changes are applied to both editors (content and comments).
    ?>
    <script type="text/javascript">
        //QTags.addButton('ID', 'label', 'start_tag', 'end_tag', 'access_key', 'title', 'priority', 'instance');
        QTags.addButton( 'shortcode_1', 'shortcode 1', '[shortcode1]', '[/shortcode1]', '', 'Tooltip about the shortcode 1', '1', '' );
        QTags.addButton( 'shortcode_2', 'shortcode 2', '[shortcode2 category="ADD-THE-CATEGORY-ID"]', '', '', 'Tooltip about the shortcode 2', '1', '' );
        QTags.addButton( 'pre_tag', 'my-pre', '<pre>', '</pre>', '', '<pre></pre>', '1', '' );
        QTags.addButton( 'div_tag', 'my-div', '<div>', '</div>', '', '<div></div>', '101', '' );
        QTags.addButton( 'span_tag', 'my-span', '<span>', '</span>', '', '<span></span>', '150', '' );
    </script>
    <?php
}

It's not possible to put a custom button after the full screen, check the priorities in QTags.addButton:

enter image description here

Upvotes: 2

Related Questions