Use quicktags toolbar on any textarea

by

reading the quicktags.dev.js i see in the comments

 * Run quicktags(settings) to initialize it, where settings is an object containing up to 3 properties:
 * settings = {
 *   id : 'my_id',          the HTML ID of the textarea, required
 *   buttons: ''            Comma separated list of the names of the default buttons to show. Optional.
 *                          Current list of default button names: 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,spell,close';
 * }
 *
 * The settings can also be a string quicktags_id.
 *
 * quicktags_id string The ID of the textarea that will be the editor canvas
 * buttons string Comma separated list of the default buttons names that will be shown in that instance.

which seems like i should be able to call the javascript functions quicktags(), pass it at least the ID of a text area and I should get the quicktags editor created just before any textarea. (i’m working in a metabox).

however, if i put the following in my code:

try { quicktags( '_repeating_textareas_meta[repeating_textareas][0][textarea]'); } catch(e){}

which I essentially copied from bit of javascript that WP has it in the source and added my metabox’s ID.

it prints out the div where the quicktags toolbar should be but doesn’t make any buttons

<div id="qt__repeating_textareas_meta[repeating_textareas][0][textarea]_toolbar" class="quicktags-toolbar"></div>

console.log doesn’t show any errors. and i swear that this time i have undone all potential tampering to source code.

EDIT:

i’ve isolated the problem down to where the script appears in the source… using Fred Rocha’s function works great (and much like i anticipated) if it runs on the admin_print_footer_scripts but not on after_wp_tiny_mce… it results in the same empty toolbar i was getting.

other parts of my jquery plugin need to run after the tinymce settings are initialized (since i’m straight borrowing the existing settings), so why would it work properly on the one hook but not on a later hook?

2 Answers
2

I have stumbled into this very same issue, and got the quicktags to work.

Here’s the code to add to functions.php:

<?php
add_action('admin_print_footer_scripts','my_admin_print_footer_scripts');
function my_admin_print_footer_scripts()
{
?>
<script type="text/javascript">/* <![CDATA[ */

    var id = "myID"; // this is your metabox's textarea id

    settings = {
        id : id,
        buttons: 'strong,em,link' 
    }

    quicktags(settings);

/* ]]> */</script>
<?php } ?>

This is the basic code that should get quicktags to work.

In case you want to go through all the (Verve) Metaboxes, and assign a toolbar, the following code could do the trick:

add_action('admin_print_footer_scripts','my_admin_print_footer_scripts');
function my_admin_print_footer_scripts()
{
    ?><script type="text/javascript">/* <![CDATA[ */
    jQuery(function($)
    {
        var i = 1;
        $('.verve_meta_box_content textarea').each(function(e)
    {
        var id = $(this).attr('id');
            if (!id)
    {
        id = 'customEditor-' + i++;
        $(this).attr('id',id);
        }

            settings = {
                id : id,
                buttons: 'strong,em,link' // Comma separated list of the names of the default buttons to show. Optional.
            }

            quicktags(settings);
         });

  });
/* ]]> */</script>
<?php } ?>

Also, in order to keep the line breaks on your front end, make sure you use “the_content” filter when outputting the textarea content, as so:

// schedule is the slug of the custom meta field
$schedule_juice = get_post_meta($current_post_ID, "schedule", false);
// preserve line breaks     
$content = apply_filters('the_content', $schedule_juice[0]);
echo $content;

The priority with which the my_admin_print_footer_scripts method was being called was the blocking issue.

Good luck!

Leave a Comment