Drupal → Вставка в CKEditor видео из ВКонтакте и Rutube (расширение модуля CKEditor 5 Media Embed)

Для вставки в CKEditor видео с основных зарубежных хостингов (YouTube, Vimeo и т.д.) есть друпал модуль CKEditor 5 Media Embed, который содержит официальный CKEditor плагин Media embed. У плагина есть API, с помощью которого можно добавлять новых провайдеров, сложность лишь в том, как передать в настройки плагина дополнительные параметры.

1. Создаём js файл:

// media-embed-new-providers.js

(Drupal => {

  const newProviders = [
    // vk.com
    {
      name: 'vk',
      url: {
        regexp: {
          pattern: '/^vk\\.com\/video-(\\d+)_(\\d+)/',
        },
      },
      html: matches => {
        return `<iframe src="https://vk.com/video_ext.php?oid=-${matches[1]}&id=${matches[2]}" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media; fullscreen; picture-in-picture" style="width:100%; aspect-ratio:16/9;"></iframe>`;
      },
    },

    // rutube.ru
    {
      name: 'rutube',
      url: {
        regexp: {
          pattern: '/^rutube\\.ru\/video\/(\\w+)\/?/',
        },
      },
      html: matches => {
        return `<iframe src="https://rutube.ru/play/embed/${matches[1]}/" frameBorder="0" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen style="width:100%; aspect-ratio:16/9;"></iframe>`;
      },
    },
  ];

  Drupal.behaviors.mediaEmbedNewProviders = {
    attach: function attach(context, settings) {
      if (settings?.editor?.formats) {
        // Сycle by formats
        Object.entries(settings.editor.formats).forEach(([formatId, formatSettings]) => {
          // Extend mediaEmbed plugin settings
          var mediaEmbedSetings = formatSettings?.editorSettings?.config?.mediaEmbed;
          if (mediaEmbedSetings) {
            const originalExtraProviders = mediaEmbedSetings.extraProviders || [];
            mediaEmbedSetings.extraProviders = [...originalExtraProviders, ...newProviders];
          }
        });
      }
    },
  };

})(Drupal);

Формат описания провайдеров отличается от того, что написан в api, потому что друпал препроцесит настройки из drupalSettings перед тем как передать их в CKEditor (смотрите функцию processConfig() в ckeditor5.js).

2. Подключаем js файл:

# MODULENAME.module

/**
 * Implements hook_library_info_alter().
 */
function MODULENAME_library_info_alter(array &$libraries, string $extension): void {
  if ($extension == 'ckeditor5_media_embed') {
    $module_path = '/' . \Drupal::service('extension.path.resolver')->getPath('module', 'MODULENAME');
    $libraries['ckeditor5.mediaEmbed']['js'][$module_path . '/media-embed-new-providers.js'] = [
      'weight' => -1, // attach before ckeditor5.js
    ];
  }
}

P.S: использование модуля CKEditor 5 Media Embed предполагает разрешение на вставку в html тега iframe, что не очень безопасно, если это будет доступно обычным пользователям.