Is there a way to get N number of WYSIWYG editors in a custom post type?

Question

Is there way to have multiple WYSIWYG editors for a custom post type? For example, if I had a 2 column layout I wanted to have one editor for one column and another editor for the other.

Answer 1

Say your custom post type was called Properties, you would add the box to hold your additional tinyMCE editor using code similar to this:

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2 is the ID that the meta box will have applied to it, Second Column is the title that the meta box will have, second_column_box is the function which will print out the HTML for the meta box, properties is our custom post type, normal is the location of the meta box, and high specifies that it should be shown as high in the page as possible. (Usually below the default tinyMCE editor).

Then, taking this as the most basic example, you must attach the tinyMCE editor to a textarea. We still have to define our second_column_box function which will print the HTML for the meta box so this is as good a place as any to do this:

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

There are a couple of issues which I'm not sure of how to overcome. The tinyMCE editor will be nested inside of a metabox, which might not be ideal, and it will not feature the ability to switch between HTML and Visual editing modes, as well as the the media insertion commands which the normal post editor has. Switching the modes appears to be defined as a function who's first argument is the ID, but yet it also appears to coded into the wp-tinymce script. It is possible to use the built in tinyMCE functions to do so, but this changes the textarea between full tinyMCE and a basic textarea, without any of the WP HTML insertion buttons.

Answer 2

The default editor, tinymce, is loaded by a function in wp-admin/includes/post.php called wp_tiny_mce(); Look in the source at line 1350. There is an array of settings at line 1478. One of the options apparently designates the textarea selector to apply the javascript editor to. I was reading this post by Keighl on his blog that pointed me toward it. Read the article, and maybe there's a way to call wp_tiny_mce() in an admin section plugin and apply it to a second text area you create.

Answer 3

Bueltge has a nice article that shows how that can be done: http://wpengineer.com/1991/example-how-to-add-meta-boxes-to-edit-area/

Answer 4

First: Big Thanks to @Thomas McDonald for his answer; I needed to figure out exactly the same question that @Paul Sheldrake asked and Thomas' code got me started in the right direction.

Unfortunately I then got stuck because I needed to change the layout from the default to a simpler and smaller layout since I needed to use the TinyMCE in a side metabox. I looked practically everywhere for a solution and especially on the MoxieCode TinyMCE Wiki and TinyMCE Tips & How To Forum and found nothing! ¹ Everything I found explained how to set theme, width, height, etc. using tinyMCE.init({...}) but apparently you can't use that when you use tinyMCE.execCommand("mceAddControl").

I was about stumped when I ran across the article multiple TinyMCE 3 instances on one page by Hamilton Chua, and he nailed it! His solution was to assign tinyMCE.settings before calling tinyMCE.execCommand("mceAddControl"), for example:

<?php 
$id = "sidebar-content";
$script = <<<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:"200",
        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",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

The sad part is this was really not hard, but it wasn't documented anywhere else I could find. It's amazing to discover almost nobody else has experienced this issue.

So anyway the above code generated the following second TinyMCE in exactly the format/layout that my client needed:

So if you are using @Thomas McDonald code above you find you have any need to modify the layout be sure to check out Hamilton Chua's awesome article (thanks Ham!):

• Multiple TinyMCE 3 instances on one page

P.S. If you do something even slightly wrong the TinyMCE may just not show at all. For example in my case I use theme: "simple" at first and I got nothing and it took me over an hour to realize that I just needed to use theme: "advanced". So if you find TinyMCE is not working for you be sure to try changing things around, you may be having a similar problem. (BTW, I haven't tried any other themes nor explored what else is available; if you find other themes that work do please let a comment below.)

Footnote

1: Very frustrating! After little more than a month with WordPress Answer I'm now expecting to find answers to all my questions as the same level of quality as here, and elsewhere I'm typically finding disappointment!

Answer 5

I got it just by adding “theEditor” as class attribute to a textarea:

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>