javascript - Media library not working with wp_editor() on the front end

admin管理员组

文章数量:1122832

Very related: Add Media has stopped working in the front end since 4.5 update

I want to run the wp_editor() function to load the classic WordPress editor on the Front-End.

I need to do this out of the WordPress theme, so I am loading WordPress manually:

require_once("../wp-load.php");

And that allows me to use the wp_editor() function, with some custom settings.

define('WP_DEBUG', true);

$settings = array(
'wpautop' => true,
'media_buttons' => true,
'textarea_name' => 'contenido',
'textarea_rows' => 12,
'tabindex' => '',
'editor_css' => '',
'editor_class' => '',
'teeny' => false,
'dfw' => false,
'tinymce' => true,
'quicktags' => true
);

wp_editor( '' /* Empty content */, 'contenido' /* ID */, $settings );

I am also logging in the user as follows:

$user_id = $_SESSION['userID'];
$user = get_user_by( 'id', $user_id ); 

if( $user ) {
    $curr_user = new WP_User( $user_id , $user->user_login ); 
    wp_set_auth_cookie( $user_id );
    do_action( 'wp_login', $user->user_login );
}

I am loading the required scripts and styles in the head section of the DOM. (Do you know if I am missing something, does the order matter?)

<?php
wp_enqueue_script( 'underscore' );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'wp-util' );

wp_enqueue_script( 'thickbox' );
wp_enqueue_style( 'thickbox' );

wp_enqueue_script( 'editor' );
wp_enqueue_script( 'quicktags' );
wp_enqueue_style( 'buttons' );
wp_enqueue_script( 'wplink' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script( 'wp-fullscreen-stub' );
wp_enqueue_script( 'media-upload' );
wp_enqueue_script( 'wp-embed' );

_WP_Editors::enqueue_scripts(false);
_WP_Editors::editor_js();

wp_print_scripts();
?>

</body>
</html>

But the media button is not working (it shows and reacts to the click event but it does not open the modal on click).

Console error says (when clicking the Insert Media button):

TypeError: i is undefined at underscore.min.js

I digged in the source code and i seems to be referencing the data-editor attribute.

But, at least in the DOM, it is correctly defined.

Maybe I am missing an important script in my queue?

Very related: Add Media has stopped working in the front end since 4.5 update

I want to run the wp_editor() function to load the classic WordPress editor on the Front-End.

I need to do this out of the WordPress theme, so I am loading WordPress manually:

require_once("../wp-load.php");

And that allows me to use the wp_editor() function, with some custom settings.

define('WP_DEBUG', true);

$settings = array(
'wpautop' => true,
'media_buttons' => true,
'textarea_name' => 'contenido',
'textarea_rows' => 12,
'tabindex' => '',
'editor_css' => '',
'editor_class' => '',
'teeny' => false,
'dfw' => false,
'tinymce' => true,
'quicktags' => true
);

wp_editor( '' /* Empty content */, 'contenido' /* ID */, $settings );

I am also logging in the user as follows:

$user_id = $_SESSION['userID'];
$user = get_user_by( 'id', $user_id ); 

if( $user ) {
    $curr_user = new WP_User( $user_id , $user->user_login ); 
    wp_set_auth_cookie( $user_id );
    do_action( 'wp_login', $user->user_login );
}

I am loading the required scripts and styles in the head section of the DOM. (Do you know if I am missing something, does the order matter?)

<?php
wp_enqueue_script( 'underscore' );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'wp-util' );

wp_enqueue_script( 'thickbox' );
wp_enqueue_style( 'thickbox' );

wp_enqueue_script( 'editor' );
wp_enqueue_script( 'quicktags' );
wp_enqueue_style( 'buttons' );
wp_enqueue_script( 'wplink' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script( 'wp-fullscreen-stub' );
wp_enqueue_script( 'media-upload' );
wp_enqueue_script( 'wp-embed' );

_WP_Editors::enqueue_scripts(false);
_WP_Editors::editor_js();

wp_print_scripts();
?>

</body>
</html>

But the media button is not working (it shows and reacts to the click event but it does not open the modal on click).

Console error says (when clicking the Insert Media button):

TypeError: i is undefined at underscore.min.js

I digged in the source code and i seems to be referencing the data-editor attribute.

But, at least in the DOM, it is correctly defined.

Maybe I am missing an important script in my queue?

• javascript
• wp-enqueue-script
• media-library
• front-end
• wp-editor

Share Improve this question edited Jan 5, 2020 at 11:13 Álvaro Franz asked Jan 4, 2020 at 12:45 Álvaro FranzÁlvaro Franz 1,09011 gold badge99 silver badges3131 bronze badges 2

• Is there a reason you're doing this outside of WordPress? – Jacob Peattie Commented Jan 4, 2020 at 15:20
• @JacobPeattie Thanks for your time. Yes, the reason is because this is part of an additional Admin Panel (not a substitute for WP Admin) which is already created and cannot easily be integrated into the current WordPress theme. A small group of users should be using this simple interface to send posts (without featured images, slugs... just the post itself). Those posts will be programatically saved as pending. – Álvaro Franz Commented Jan 4, 2020 at 15:37

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You need to use this script https://github.com/anteprimorac/js-wp-editor.

This can be used to add WordPress editor php: wp_editor()

You can use the wp_enqueue_media() function to ensure that the required scripts and styles are enqueued

function enqueue_custom_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_media();
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');


$content = $_POST['contenido'];

$settings = array(
'wpautop' => true,
'media_buttons' => true,
'textarea_name' => 'contenido',
'textarea_rows' => 12,
'tabindex' => '',
'editor_css' => '',
'editor_class' => '',
'teeny' => false,
'dfw' => false,
'tinymce' => true,
'quicktags' => true
);

wp_editor($content, 'contenido', $settings);

本文标签： javascriptMedia library not working with wpeditor() on the front end