Replacing a textarea with WordPress TinyMCE wp_edi

Question

I am trying to replace a textarea with wp_editor()

My textarea form element looks like this:

<textarea name="post_text" id="post_text" rows="3"><?php echo $content; ?></textarea>

Then I have:

wp_editor( $content, 'post_text' );

The problem I am getting is both the form textarea and the wp_editor textarea are outputted on the page. Why are both textareas displaying? I only need one textarea to display. Everything saves fine, I just have this problem of 2 textareas showing.

EDIT: Is it as simple as putting a display: none; on my form's textarea so just the wp_editor() textarea displays? That seems to work but feels a bit hackish.

Answer 1

If you put a text area in your code

<textarea></textarea>

Then of course it's going to show up on the page, that's what it's supposed to do. Unless there's something I'm misunderstanding, I don't see how that doesn't make sense.

Like you suggested, I think this will do what you want:

<textarea style="display:none" name="post_text" id="posttext" rows="3"><?php echo $content; ?></textarea>

It will still be there functionally, but invisible.

Answer 2

I found the solution. You can use a third parameter to pass an array of arguments. Now this is pretty obvious as outlined in the Codex: http://codex.wordpress.org/Function_Reference/wp_editor

What is a little confusing (the source of my problem) is $editor_id may only contain lowercase letters. So if your form processing script is looking for something with underscores in it (as mine was) then you'll need to do this:

$settings = array( 'textarea_name' => 'post_text' )

wp_editor( $content, $editor_id, $settings );

Note you can't do this:

wp_editor( $content, 'post_text' );

Which is where I went wrong.

Answer 3

Instead of outputting a new textarea to the page (by wp_editor()) and hiding the original textarea with display: none;, one can do this:

add_action('admin_init', '20331501_convert_textarea_to_wysiwyg');

function 20331501_convert_textarea_to_wysiwyg(){
    wp_enqueue_editor();
    add_action( 'admin_print_footer_scripts', function() {
        ?>
        <script>
            jQuery(function(){
                wp.editor.initialize('the-id-of-your-textarea-without-the-#', {
                    setup: function (editor) {
                        editor.on('change', function () {
                            editor.save();
                        });
                    }
                });
            });
        </script>
        <?php
    }, 10, 2 );
}

This code snippet converts the existing textarea to wysiwyg. The editor.save() takes care of updating the textarea value so that it gets passed along when one submits the form. (credits to @Dan Malcolm)

Answer 4

Call your template page where you wish to place tinyMCE, on that template page place a placeholder such as CONTENT_EDITOR and use php str_replace function to add tinyMCE to that template content:

function add_tinymce_to_page(){
    $creatorHTML                    =   file_get_contents(
        'your-template-pafe.php',
        TRUE
    );

    $editorHTML                     = generate_content_with_editor();
    $creatorHTML                    =   str_replace(
        'CONTENT_EDITOR',
        $editorHTML,
        $creatorHTML
    );

    return $creatorHTML;
}

function generate_content_with_editor(){
    ob_start();
    wp_editor( '', 'tinymcecontenteditor' );
    $editor_contents                = ob_get_contents();
    ob_get_clean();
    return $editor_contents;
}

I use php's ob so tinyMCE does not display before full page is rendered.