CKEditor Media Embed プラグイン

CKEditor 5 Media Embed プラグインを Drupal に追加し、コンテンツ作成者が YouTube、Vimeo、Twitter など 1700 以上のコンテンツソースから外部メディアを埋め込めるようにします。

ckeditor_media_embed
4,271 sites
36
drupal.org

インストール

Drupal 11, 10 v2.0.5
composer require 'drupal/ckeditor_media_embed:^2.0'
Drupal 9, 8 v8.x-1.14
composer require 'drupal/ckeditor_media_embed:8.x-1.14'

概要

CKEditor Media Embed モジュールは、CKEditor 5 Media Embed プラグインを Drupal の CKEditor 実装に統合し、コンテンツ作成者が WYSIWYG エディタを使用して外部プロバイダーからリッチメディアコンテンツを直接コンテンツに埋め込めるようにします。

このモジュールは oEmbed プロトコルを使用して、設定可能なプロバイダーから埋め込みコードを取得します。デフォルトでは、YouTube、Vimeo、Twitter、Instagram、Imgur、GitHub、Google Maps など 1715 以上のコンテンツプロバイダーをサポートする Iframely プロキシサービスを使用します。Noembed や embed.ly などの代替プロバイダーも設定可能です。

このモジュールは、完全な埋め込み HTML ではなく <oembed> タグをデータベースに保存し、レンダリング時にテキストフィルターを使用してこれらのタグを実際の埋め込み HTML に変換します。このアプローチにより、より良いポータビリティが確保され、プロバイダーが埋め込み形式を更新しても埋め込みコードを最新の状態に保つことができます。

さらに、このモジュールは Link フィールドを oEmbed メディア埋め込みとしてレンダリングできる Field Formatter を提供し、テキストフィールド以外でのメディア埋め込みを可能にします。

Features

  • URL からメディアを挿入するための CKEditor 5 Media Embed ツールバーボタン
  • 設定可能な oEmbed プロキシサービス(Iframely、Noembed、embed.ly など)を通じて 1700 以上のコンテンツプロバイダーをサポート
  • レンダリング時に <oembed> タグを埋め込みメディア HTML に変換するテキストフィルター
  • 設定された oEmbed プロバイダーを使用して Link フィールドを埋め込みメディアとして表示する Link Field Formatter
  • 必要な CKEditor プラグインファイルのインストールと更新のための Drush コマンド
  • 埋め込み iframe に title 属性を追加することによるアクセシビリティの自動向上
  • {url} と {callback} トークン置換による設定可能なプロバイダー URL
  • インストール済み CKEditor プラグインのバージョン追跡とステータスレポート

Use Cases

コンテンツへの YouTube 動画の埋め込み

コンテンツエディターは CKEditor に YouTube URL を貼り付け、Media Embed ボタンを使用して埋め込み動画プレーヤーに変換できます。動画はサイトを離れることなくコンテンツ内に直接表示されます。

ソーシャルメディア投稿の埋め込み

Twitter のツイート、Instagram の投稿、その他のソーシャルメディアコンテンツは、URL を貼り付けて Media Embed 機能を使用することで埋め込むことができます。これにより、元のフォーマットとインタラクティブ性を維持しながら、リッチなソーシャルコンテンツの統合が可能になります。

Link フィールドを使用した動画ギャラリーの作成

複数値の Link フィールドを持つコンテンツタイプを作成し、「CKEditor Media Embed プロバイダーを使用した Oembed 要素」フォーマッターを使用します。これにより、各リンクが自動的に埋め込み動画プレーヤーとしてレンダリングされる構造化された動画ギャラリーを作成できます。

GitHub Gists からのコードスニペットの埋め込み

開発者は Gist URL を貼り付けて Media Embed を使用することで GitHub Gists を埋め込むことができます。コードスニペットは適切なシンタックスハイライト付きでコンテンツ内に直接表示されます。

インタラクティブマップの埋め込み

Google Maps やその他の地図サービスの URL を埋め込んでコンテンツ内にインタラクティブな地図を表示できます。位置情報に基づくコンテンツ、イベントページ、または連絡先情報に便利です。

Tips

  • 単一の設定で最も幅広いメディアソースをサポートするために、直接のプロバイダー URL ではなく Iframely や Noembed などのプロキシサービスを使用してください。
  • Media Embed ボタンを使用するテキストフォーマットには、必ず「Oembed タグをメディア埋め込みに変換」フィルターを有効にしてください。そうしないと埋め込みがレンダリングされません。
  • このモジュールは HTML ではなく <oembed> タグを保存するため、プロバイダーまたはプロバイダーの設定を変更すると、既存の埋め込みは自動的に新しい設定を使用します。
  • 埋め込みのカスタムテーマ設定には、hook_ckeditor_media_embed_object_alter() を実装して埋め込み HTML ラッパーを変更したり、カスタムクラスを追加したりしてください。
  • Drupal Core をアップグレードした後、'drush ckeditor_media_embed:update' を実行して新しい CKEditor バージョンとのプラグインの互換性を確保してください。
  • 'drush config-edit ckeditor_media_embed.settings' を使用して ckeditor_version 設定値を設定することで、プラグインのダウンロードに使用する CKEditor バージョンを上書きできます。

Technical Details

Admin Pages 1
CKEditor Media Embed /admin/config/media/ckeditor-media-embed/settings

CKEditor Media Embed プラグインがメディアリソースの埋め込みコードを取得するために使用する oEmbed プロバイダー URL を設定します。

Hooks 1
hook_ckeditor_media_embed_object_alter

モジュールがレンダリング前に oEmbed オブジェクトを変更できるようにします。このモジュール自体がこの hook を実装し、アクセシビリティのために iframe に title 属性を追加しています。

Drush Commands 2
drush ckeditor_media_embed:install

NPM レジストリから必要な CKEditor Media Embed プラグインファイルをダウンロードして libraries ディレクトリにインストールします。

drush ckeditor_media_embed:update

CKEditor Media Embed プラグインファイルを Drupal Core にインストールされている CKEditor のバージョンに合わせて更新します。

Troubleshooting 5
Media Embed ボタンが CKEditor ツールバーに表示されない

'drush ckeditor_media_embed:install' を実行して CKEditor プラグインがインストールされていることを確認してください。/admin/reports/status のステータスレポートでプラグイン不足のエラーがないか確認してください。

埋め込みメディアが生の <oembed> タグとして表示される

使用しているテキストフォーマットで「Oembed タグをメディア埋め込みに変換」フィルターを有効にしてください。管理 > 環境設定 > コンテンツオーサリング > テキストフォーマットとエディター に移動し、フォーマットを編集して、フィルターのチェックボックスをオンにしてください。

ステータスレポートにバージョン不一致の警告が表示される

インストールされているプラグインのバージョンが CKEditor Core と異なっています。'drush ckeditor_media_embed:update' を実行して、プラグインを Core の CKEditor バージョンに合わせて更新してください。

特定の URL を埋め込めない

設定された oEmbed プロバイダーがそのコンテンツソースをサポートしていない可能性があります。より多くのコンテンツプロバイダーをサポートする Iframely などのプロバイダーへの切り替えを検討するか、プロバイダーのドキュメントでサポートされているソースを確認してください。

メディア埋め込み時に HTTPS エラーが発生する

デフォルトの Iframely エンドポイントは HTTP を使用しています。HTTPS サポートには、Iframely アカウントを作成し、モジュール設定でプロバイダー URL を API キー付きの HTTPS を使用するように更新してください。

Security Notes 3
  • 埋め込みコンテンツはサードパーティソースからレンダリングされるため、設定された oEmbed プロバイダーを信頼していることを確認してください。
  • このモジュールはアクセシビリティ準拠のために埋め込み iframe に title 属性を追加します。
  • 信頼されていないユーザーに外部コンテンツの埋め込みを許可する場合のセキュリティ上の影響を考慮してください。これはフィッシングや悪意のあるコンテンツに使用される可能性があります。