用 WordPress TinyMCE wp_editor() 替换 textarea

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

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 2

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 3

The following PHP code turns into a textarea with the name & id "expirationErrorMessage".

$id = "expirationErrorMessage";
$name = 'expirationErrorMessage';
$content = esc_textarea( stripslashes( $yourtext ) );
$settings = array('tinymce' => true, 'textarea_name' => "expirationErrorMessage");
wp_editor($content, $id, $settings);

Answer 4

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 5

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.