Replacing a text field with WordPress TinyMCE wp_editor ()

Question

I am trying to replace textarea with wp_editor ()

The textarea form element is as follows:

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

Then I:

 wp_editor( $content, 'post_text' ); 

The problem I get is both the textarea form and the wp_editor text area are displayed on the page. Why are both text fields displayed? I need only one text box to display. Everything saves well, I just have a problem with displaying 2 text fields.

EDIT: This is as simple as putting display: none; to my textarea form, so the wp_editor () text area will be displayed? This seems to work, but it seems a bit hacky.

Answer 1

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

Which is a bit confusing (the source of my problem) - $ editor_id can only contain lowercase letters. Therefore, if your script form processing is looking for something with an underscore in it (like mine), you will need to do this:

 $settings = array( 'textarea_name' => 'post_text' ) wp_editor( $content, $editor_id, $settings ); 

Note that you cannot do this:

 wp_editor( $content, 'post_text' ); 

That's where I got it wrong.

Answer 2

If you put a text area in your code

 <textarea></textarea> 

Then, of course, he will appear on the page, what should he do. If I don’t understand something, I don’t understand how it makes no sense.

As you said, 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 function, but is invisible.

Answer 3

Call the template page where you want to place tinyMCE , on this template page put a placeholder , for example CONTENT_EDITOR , and use the php str_replace function to add tinyMCE to this 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 am using php ob , so tinyMCE not displayed until the full page is displayed.

Answer 4

Instead of displaying a new text field on the page (via wp_editor() ) and hiding the original text field using display: none; You can do the following:

 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 piece of code converts an existing text box to wysiwyg. editor.save() takes care of updating the value of textarea so that it is passed along when someone editor.save() form. ( credits @Dan Malcolm )