Медиатека WordPress — это мощный инструмент для управления и организации медиафайлов, таких как изображения, видео и документы. TinyMCE, с другой стороны, — популярный редактор WYSIWYG («Что видишь, то и получаешь»), используемый в WordPress для создания и редактирования контента. Интеграция медиа-библиотеки WordPress с TinyMCE может улучшить процесс создания контента, позволяя пользователям легко вставлять медиа-файлы непосредственно из библиотеки. В этой статье мы рассмотрим несколько методов такой интеграции, а также приведем примеры кода.

Метод 1: использование API JavaScript wp.media
API JavaScript wp.media обеспечивает простой способ взаимодействия с медиабиблиотекой WordPress. Вот пример того, как вы можете добавить медиатеку WordPress в TinyMCE с помощью этого API:

// Register a custom button in TinyMCE
tinymce.PluginManager.add('insert_media_button', function(editor) {
  editor.addButton('insert_media_button', {
    text: 'Insert Media',
    icon: 'wp-media',
    onclick: function() {
      // Open the WordPress Media Library
      wp.media.editor.open(editor);
      // Handle the selected media file
      wp.media.editor.send.attachment = function(props, attachment) {
        // Insert the selected media file into the editor
        editor.insertContent('<img src="' + attachment.url + '">');
      }
    }
  });
});

Метод 2: использование плагина TinyMCE
Другой подход — создать собственный плагин TinyMCE, который интегрируется с медиатекой WordPress:

// Create a custom TinyMCE plugin
(function() {
  tinymce.create('tinymce.plugins.InsertMediaPlugin', {
    init: function(editor) {
      // Add a custom button to the toolbar
      editor.addButton('insert_media_button', {
        text: 'Insert Media',
        icon: 'wp-media',
        onclick: function() {
          // Open the WordPress Media Library
          wp.media.editor.open(editor);
          // Handle the selected media file
          wp.media.editor.send.attachment = function(props, attachment) {
            // Insert the selected media file into the editor
            editor.insertContent('<img src="' + attachment.url + '">');
          }
        }
      });
    }
  });
  // Register the plugin
  tinymce.PluginManager.add('insert_media_plugin', tinymce.plugins.InsertMediaPlugin);
})();

Чтобы использовать этот метод, вам необходимо поставить пользовательский плагин TinyMCE в вашу тему или плагин WordPress.

Метод 3: использование короткого кода
WordPress предоставляет возможность создавать собственные короткие коды, которые можно использовать для вставки динамического контента. Вы можете использовать эту функцию для создания короткого кода, который извлекает медиафайлы из медиатеки WordPress:

// Register a custom shortcode
function insert_media_shortcode($atts) {
  // Retrieve the media file ID from the shortcode attributes
  $atts = shortcode_atts(array(
    'id' => ''
  ), $atts);
  // Get the media file URL based on the ID
  $media_url = wp_get_attachment_url($atts['id']);
  // Return the HTML code for the media file
  return '<img src="' . $media_url . '">';
}
add_shortcode('insert_media', 'insert_media_shortcode');

После того как вы добавили этот код в файл functions.phpвашей темы, вы можете использовать шорткод [insert_media id="123"]в редакторе TinyMCE для вставки медиафайлов.

Интеграция медиатеки WordPress с TinyMCE обеспечивает плавный рабочий процесс для создателей контента, позволяя им легко вставлять медиафайлы в свои сообщения и страницы. В этой статье мы рассмотрели три различных метода: использование API JavaScript wp.media, создание собственного плагина TinyMCE и использование короткого кода. Каждый метод имеет свои преимущества, поэтому выберите тот, который лучше всего соответствует вашим потребностям. Реализовав любой из этих методов, вы сможете улучшить процесс создания контента в WordPress и оптимизировать процесс управления мультимедиа.