wp_editor doesn't work in front end area

Question

I am developing a theme where I would like to have a front-end area, but when I try to include the wp_editor() in the page template I am getting this result:

P.S. The wordpress editor works fine in the dashboard.

Pietro

Answer 1

You need to first define the $settings and the $editor_id and the $content variables. Then you can call wp_editor().

Something like this should work for you:

// default settings
$content = 'This content gets loaded first.';
$editor_id = 'my_frontend_editor';
$settings =   array(
    'wpautop' => true, // use wpautop?
    'media_buttons' => true, // show insert/upload button(s)
    'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
    'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
    'tabindex' => '',
    'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".
    'editor_class' => '', // add extra class(es) to the editor textarea
    'teeny' => false, // output the minimal editor config used in Press This
    'dfw' => false, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)
    'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
    'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
);
wp_editor( $content, $editor_id, $settings );

Remember, variables have to be defined before you can use them.

Answer 2

Wild guess, are you using _ (underscore) in your editor ID? If yes, try removing them and use only lowercase letters.. Something like thisismyeditorid.

From the Codex..

Note that the ID that is passed to the wp_editor() function can only be composed of lower-case letters. No underscores, no hyphens. Anything else will cause the WYSIWYG editor to malfunction.

Answer 3

To display it in a template, use this:

<?php
/*
Template Name: Template-Editor */
?>

//have to load all the scripts and header info
<?php get_header(); ?>

<?php 
$content = 'Initial content for the editor.';
$editor_id = 'editor';
$settings =   array(
    'wpautop' => true, //Whether to use wpautop for adding in paragraphs. Note that the paragraphs are added automatically when wpautop is false.
    'media_buttons' => true, //Whether to display media insert/upload buttons
    'textarea_name' => $editor_id, // The name assigned to the generated textarea and passed parameter when the form is submitted.
    'textarea_rows' => get_option('default_post_edit_rows', 10), // The number of rows to display for the textarea
    'tabindex' => '', //The tabindex value used for the form field
    'editor_css' => '', // Additional CSS styling applied for both visual and HTML editors buttons, needs to include <style> tags, can use "scoped"
    'editor_class' => '', // Any extra CSS Classes to append to the Editor textarea
    'teeny' => false, // Whether to output the minimal editor configuration used in PressThis
    'dfw' => false, // Whether to replace the default fullscreen editor with DFW (needs specific DOM elements and CSS)
    'tinymce' => true, // Load TinyMCE, can be used to pass settings directly to TinyMCE using an array
    'quicktags' => true // Load Quicktags, can be used to pass settings directly to Quicktags using an array. Set to false to remove your editor's Visual and Text tabs.
    'drag_drop_upload' => true //Enable Drag & Drop Upload Support (since WordPress 3.9) 
);
wp_editor( $content, $editor_id, $settings );

 ?>

//have to include the footer info
<?php get_footer(); ?>

Or you can Display an empty editor on its own using the default settings:

<?php

$content = '';
$editor_id = 'mycustomeditor';

wp_editor( $content, $editor_id );

?>

Documentation: https://codex.wordpress.org/Function_Reference/wp_editor

Answer 4

For those who can instantiate the editor but don't get the textarea updated on submitting the form sometimes there is incompatibility issues.

In this case you can trigger the save method before posting. Here is an example using jQuery:

$("#saveBtn").on("click",function(e){
                    
        e.preventDefault();
                    
        if( tinyMCE.editors.length > 0 ){
                        
            $.each(tinyMCE.editors,function(i,editor){
                            
                editor.save();

                // do something else

            });
        }
                    
        $("#savePostForm").trigger("submit");
});