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.

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.

share|improve this question
    
What kind of WYSIWYG configuration do you need? The full panel incl. uploading images, fullscreen mode etc? –  hakre Aug 17 '10 at 13:58
    
Related question: wordpress.stackexchange.com/questions/53/… –  hakre Aug 17 '10 at 14:06
    
I need exactly this question answered for a client project. Thanks for asking! –  MikeSchinkel Aug 17 '10 at 18:25
    
MikeSchinkel - I'm new to WordPress; where do I put the code you posted? –  Alex May 26 '11 at 1:21
    
@Alex - The code is in my answer. –  MikeSchinkel May 26 '11 at 5:01

5 Answers 5

up vote 13 down vote accepted

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.

share|improve this answer
    
"Meta_boxen"? Awesome! I thought I was the only one. Gonna give you solution a try in a little while. –  mfields Mar 5 '11 at 12:44
    
This solution worked perfectly for me. Thanks! –  mfields Mar 5 '11 at 14:05
    
Thomas McDonalds solution is not working for me in 3.1 - is there a way in 3.1 to do this? –  user4484 Apr 6 '11 at 14:52
    
3.2.1 here and it works perfectly. Great work Thomas! –  Michal Mau Jul 19 '11 at 23:14

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! 1 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:

Multiple TinyMCE TextAreas in the WordPress 3.0 Admin Editor

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!):

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!

share|improve this answer
    
Mike, you're missing an equals after $script and also there's no closing for your heredoc, ie. EOT;. Apart from the small errors it's a good working example.. ;) –  t31os Nov 13 '10 at 8:01
    
@t31os - Thanks for letting me know. Not sure how I missed those; I usually test and then copy my answers from my working code. Go figure! –  MikeSchinkel Nov 13 '10 at 10:16
    
No problem.. ;) –  t31os Nov 13 '10 at 11:30
    
using this solution resulted in the normal visual editor being set SimpleLayout as well for me in 3.1. –  mfields Mar 5 '11 at 14:02
    
@mfields - Bummer that 3.1 has broken so many things. :-( –  MikeSchinkel Mar 5 '11 at 15:06

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/

share|improve this answer

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.

share|improve this answer

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>
share|improve this answer

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.