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!
