Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Firstly please allow me to apologise - my fourth question in the week that I've been here! You've all been very helpful though, which is why I keep coming back..

I'm trying to put together a custom post type which doesn't utilise the 'editor'. There is a lot of input fields on the page and most of them will need a custom TinyMCE editor.

I have meta boxes with textareas. I've tried the following code:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#etymology").addClass("mceEditor");
        if ( typeof( tinyMCE ) == "object" &&
        typeof( tinyMCE.execCommand ) == "function" ) {
            tinyMCE.execCommand("mceAddControl", false, "etymology");
        }
    });
</script>

with...

    if (function_exists('wp_tiny_mce')) {

        add_filter('teeny_mce_before_init', create_function('$a', '
            $a["theme"] = "advanced";
            $a["skin"] = "wp_theme";
            $a["height"] = "75";
            $a["theme_advanced_buttons1"] = "bold, italic, pastetext, pasteword,
                bullist, numlist, link, unlink, outdent, indent, charmap, removeformat, spellchecker, fullscreen";

            return $a;'));

        wp_tiny_mce(true);
    }

They don't seem to work together. The TinyMCE editor appears on the right element but it's just the default WP editor, not the settings I've tried to implement.

So, my three questions are...

Question 1 When using meta boxes for custom post types, what's the best (by best I probably mean most flexible and integrated and least "hacky") way to add a custom TinyMCE editor to multiple elements?

Question 2 A follow on from Question 1... How do I go about adding custom buttons to such a setup?

Question 3 Is it possible to change the minimum height of the TinyMCE editor? It seems to be force-capped at 100px.

My research and attempts at making this work appear to indicate that WordPress' built in TinyMCE functions won't do the job. Might it be best for me to make this completely bespoke, i.e. deregister the existing tinyMCE scripts and register my own? If so, is it possible to only do this on my custom post type pages?

Thanks in advance, apologies for the essay!


MAJOR EDIT - QUESTIONS 1 & 2 RESOLVED OK, courtesy of Martin's post (and Mike's code!) I've managed to set up multiple textareas with custom buttons:

function meta_genus_species() {
    global $post;

    $genus = get_post_custom_values( 'genus', $post->ID );
    $species = get_post_custom_values( 'species', $post->ID );
    $etymology = get_post_custom_values( 'etymology', $post->ID );
    $family = get_post_custom_values( 'family', $post->ID );
    $common_names = get_post_custom_values( 'common_names', $post->ID );

    if (!isset($id)) { $id = "etymology"; }
    if (!isset($temp_min)) { $temp_min = plugins_url('images/temp_max.png' , __FILE__); }
    if (!isset($temp_max)) { $temp_max = plugins_url('images/temp_min.png' , __FILE__); }
    if (!isset($pH_min)) { $pH_min = plugins_url('images/pH_max.png' , __FILE__); }
    if (!isset($pH_max)) { $pH_max = plugins_url('images/pH_max.png' , __FILE__); }

$tinyMCE = <<<EOT
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $("#{$id}").addClass("mceEditor");
            if ( typeof( tinyMCE ) == "object" &&
                 typeof( tinyMCE.execCommand ) == "function" ) {
              tinyMCE.settings = {
                theme : "advanced",
                mode : "none",
                language : "en",
                height:"75",
                width:"100%",
                theme_advanced_layout_manager : "SimpleLayout",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,temp_min,temp_max,pH_min,pH_max",
                theme_advanced_buttons2 : "",
                theme_advanced_buttons3 : "",
                setup : function(ed) {
                    ed.addButton('temp_min', {
                        title : 'Temperature: Minimum',
                        image : '{$temp_min}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[temp_min]');
                        }
                    }),
                    ed.addShortcut("ctrl+1", "temp_min", "temp_min"),
                    ed.addButton('temp_max', {
                        title : 'Temperature: Maximum',
                        image : '{$temp_max}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[temp_max]');
                        }
                    }),
                    ed.addButton('pH_min', {
                        title : 'pH: Minimum',
                        image : '{$pH_min}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[pH_min]');
                        }
                    }),
                    ed.addButton('pH_max', {
                        title : 'pH: Maximum',
                        image : '{$pH_max}',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent('[pH_max]');
                        }
                    });
                }
              };
              tinyMCE.execCommand("mceAddControl", true, "{$id}");
            }
        });
    </script>
EOT;
    echo $tinyMCE;

    ?>
<div class="meta_control normal">
    <p>Description of taxonomy.</p>
    <div class="box">
        <label>Genus</label>
        <p>
            <input name="genus" class="text" value="<?php if(isset($genus[0])) { echo esc_attr( $genus[0] ); } ?>" />
            <span>Testing...</span>
        </p>
    </div>
    <div class="box">
        <label>Species</label>
        <p>
            <input name="species" class="text"  value="<?php if(isset($species[0])) { echo esc_attr( $species[0] ); } ?>" />
            <span>Testing...</span>
        </p>
    </div>
    <p>
        <label>Etymology</label>
        <textarea cols="50" rows="5" name="etymology" id="etymology"><?php if(isset($etymology[0])) { echo esc_attr( $etymology[0] ); } ?></textarea>
        <span>Description</span>
    </p>
    <p>
        <label>Family</label>
        <input name="family" class="text"  value="<?php if(isset($family[0])) { echo esc_attr( $family[0] ); } ?>" />
        <span>Description</span>
    </p>
    <p>
        <label>Common Names</label>
        <input name="common_names" class="text"  value="<?php if(isset($common_names[0])) { echo esc_attr( $common_names[0] ); } ?>" />
        <span>Description</span>
    </p>
</div>
    <?php

}

function meta_authored() {
    global $post;

    $species_author = get_post_custom_values( 'species_author', $post->ID );
    $year_described = get_post_custom_values( 'year_described', $post->ID );

    ?>
<div class="meta_control side">
    <label>Species Author</label>
    <p>
        <input name="species_author" class="text" value="<?php if(isset($species_author[0])) { echo esc_attr( $species_author[0] ); } ?>" />
    </p>
    <label>Year Described</label>
    <p>
        <input name="year_described" class="text" value="<?php if(isset($year_described[0])) { echo esc_attr( $year_described[0] ); } ?>" />
    </p>
</div>
    <?php
}

I am absolutely over the moon! I've been working SO hard to find that information. Thank you ever so much Martin :)

Just Question 3 to answer now!

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

would this be heading in the right direction?.. See Mikes Code

share|improve this answer
    
Thanks Martin - yes, that solves problem 1... but from previous experience I can't think of a way of adding custom buttons to such a setup? –  dunc Jun 24 '11 at 18:12
    
OOH, tell a lie Martin: I've managed to add custom buttons! Yay! –  dunc Jun 24 '11 at 18:45
    
great news.. and thanks for leaving a working code as an example for others.. –  MartinJJ Jun 25 '11 at 7:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.