CODEWITHSUNDEEP
phpwordpresstinymce
henrywright
henrywright

Reputation: 10240

Replacing a textarea with WordPress TinyMCE wp_editor()

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.

Upvotes: 7

Views: 34419

Answers (5)

Ravi Jayagopal
Ravi Jayagopal

Reputation: 934

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' => $name);
wp_editor($content, $id, $settings);

Upvotes: 2

jgangso
jgangso

Reputation: 658

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)

Upvotes: 2

Jadeye
Jadeye

Reputation: 4269

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.

Upvotes: 0

henrywright
henrywright

Reputation: 10240

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.

Upvotes: 9

Entity
Entity

Reputation: 8202

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.

Upvotes: 2

Related Questions