6

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.

henrywright
  • 10,070
  • 23
  • 89
  • 150
  • I solve same issue by remove ` – Salem Feb 27 '16 at 20:51

5 Answers5

9

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.

henrywright
  • 10,070
  • 23
  • 89
  • 150
  • This displays the HTML version of the WP editor, but does not display the tinymce editor. – sgtcoder Nov 07 '18 at 17:05
  • In my case I want to add a text field. How to do it? https://wordpress.stackexchange.com/questions/318814/how-to-modify-default-taxonomy-field-to-a-single-text-field – leonardeveloper Nov 10 '18 at 05:27
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.

Entity
  • 7,972
  • 21
  • 79
  • 122
  • Thanks. So I don't need to have the textarea element on the page? Can I just remove it? Is that how wp_editor() is intended to work? – henrywright Dec 02 '13 at 15:39
  • Hm. I looked into TinyMCE some more and it appears I misunderstood your question. Could you provide more code? I think the issue is occuring elsewhere. – Entity Dec 02 '13 at 15:44
  • Can you provide a link to where the problem is happening elsewhere? That is in fact all the code I have so far. Do you mean the form processing code? That is coming from a plugin called Simple Front End Post https://github.com/sbrajesh/bp-simple-front-end-post – henrywright Dec 02 '13 at 15:48
  • That's *all* your code? Is the call to `wp_editor` inside `` ? What are you using the TinyMCE editor for? – Entity Dec 02 '13 at 15:50
  • Yes, that's it. I'm using the TinyMCE editor to edit WordPress posts from the front end. I think I may have resolved the problem. Doing the following lets you remove the form's textarea from the page and use the textarea that is outputted by wp_editor(): $settings = array( 'textarea_name' => 'bp_simple_post_text' ... – henrywright Dec 02 '13 at 15:57
  • 1
    Fabulous :) Remember to post that as an answer then. – Entity Dec 02 '13 at 15:59
2

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);
Popnoodles
  • 28,090
  • 2
  • 45
  • 53
Ravi Jayagopal
  • 916
  • 7
  • 10
1

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)

jgangso
  • 638
  • 10
  • 19
0

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.

Jadeye
  • 3,551
  • 4
  • 47
  • 63