Библиотека медиа не работает с wp_editor() на фронтенде

Содержание

Вопрос или проблема
Ответ или решение
Подключение необходимых скриптов и стилей
Использование функции wp_editor()
Проверка кода на наличие ошибок
Полный пример
Заключение

Вопрос или проблема

Очень связано: Добавить медиафайл перестало работать на фронтэнде с обновления 4.5

Я хочу запустить функцию wp_editor(), чтобы загрузить классический редактор WordPress на фронтэнде.

Мне нужно сделать это вне темы WordPress, поэтому я загружаю WordPress вручную:

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

И это позволяет мне использовать функцию wp_editor() с некоторыми настройками.

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( '' /* Пустое содержимое */, 'contenido' /* ID */, $settings );

Я также вхожу в систему как пользователь следующим образом:

$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 );
}

Я загружаю необходимые скрипты и стили в секции head DOM. (Знаете ли вы, что-то я пропустил, имеет ли значение порядок?)

<?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>

Но кнопка медиафайлов не работает (она отображается и реагирует на событие клика, но не открывает модальное окно при нажатии).

Ошибка в консоли говорит (при нажатии на кнопку Вставить медиафайл):

TypeError: i не определён в underscore.min.js

Я копался в исходном коде, и похоже, что он ссылается на атрибут data-editor.

Но, по крайней мере в DOM, он правильно определён.

Может быть, я пропустил важный скрипт в своей очереди?

Вам нужно использовать этот скрипт https://github.com/anteprimorac/js-wp-editor.

Это можно использовать для добавления редактора WordPress php: wp_editor()

Вы можете использовать функцию wp_enqueue_media(), чтобы убедиться, что необходимые скрипты и стили загружены

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);

Ответ или решение

Вопрос: Проблемы с использованием медиа-библиотеки в wp_editor() на фронт-энде

Чтобы интегрировать классический редактор WordPress на фронт-энде вашего сайта, вам необходимо убедиться, что вы правильно подключили все необходимые скрипты и стили. Судя по вашему коду и описанию, вы уже сделали много правильных шагов, но давайте проверим несколько важных моментов.

Подключение необходимых скриптов и стилей

Для того чтобы кнопка "Добавить медиа" работала, вам нужно убедиться, что вы подключили все нужные файлы. Вы можете использовать функцию wp_enqueue_media(), которая автоматически подключает необходимые скрипты и стили для работы с библиотекой медиа. Вот как это можно сделать:

function enqueue_custom_scripts() {
    // Подключаем jQuery
    wp_enqueue_script('jquery');

    // Подключаем необходимые скрипты и стили для работы с медиа
    wp_enqueue_media();

    // Также подключаем другие стили и скрипты, если необходимо
    wp_enqueue_script('thickbox');
    wp_enqueue_style('thickbox');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

Использование функции wp_editor()

Теперь, что касается самой функции wp_editor(), вам нужно убедиться, что вы передаете правильный контент в качестве первого параметра. Как вы уже сделали, вы можете взять еще раз содержимое из $_POST:

$content = isset($_POST['contenido']) ? $_POST['contenido'] : '';

Затем вызываем wp_editor() как обычно:

$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);

Проверка кода на наличие ошибок

Если при клике на кнопку "Добавить медиа" вы получаете ошибку в консоли TypeError: i is undefined, это может указывать на проблему с загрузкой или инициализацией JavaScript-скриптов. Убедитесь, что:

Вы загружаете скрипты в правильном порядке (jQuery должен загружаться раньше, чем другие скрипты, использующие его).
Применение wp_print_scripts() должно происходить после определения всех скриптов, поэтому возможно стоит убрать вызов этой функции, если вы добавили свои скрипты в wp_enqueue_scripts.

Полный пример

Вот полный пример кода, который должен работать:

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

define('WP_DEBUG', true);

// Начинаем сессию и аутентифицируем пользователя
session_start();
$user_id = $_SESSION['userID'];
$user = get_user_by('id', $user_id);

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

// Подключаем необходимые скрипты и стили
function enqueue_custom_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_media();
    wp_enqueue_style('thickbox');
    wp_enqueue_script('thickbox');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

// Получаем контент из POST запроса
$content = isset($_POST['contenido']) ? $_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);

Заключение

Если после этих изменений кнопка "Добавить медиа" по-прежнему не работает, проверьте инструменты разработчика(консоль) на наличие ошибок. Убедитесь, что все подключения происходят корректно и все зависимости загружаются. В случае возникновения дополнительных вопросов, пожалуйста, уточните детали — мы поможем вам с решением!