CKEditor Bootstrap Grid
コンテンツエディターがWYSIWYGエディター内で直感的なダイアログインターフェースを通じてBootstrapグリッドレイアウトを簡単に作成できるCKEditor 5プラグインです。
ckeditor_bs_grid
インストール
composer require 'drupal/ckeditor_bs_grid:^2.0'
概要
CKEditor Bootstrap Gridは、CKEditor 5リッチテキストエディターとBootstrapのレスポンシブグリッドシステムをシームレスに統合します。このモジュールにより、コンテンツエディターはHTMLやCSSコードを一切書くことなく、複雑でレスポンシブなカラムレイアウトを作成できます。
このモジュールはCKEditorツールバーにBootstrap Gridボタンを追加し、グリッドレイアウトを設定するためのマルチステップダイアログを開きます。ユーザーはカラム数（1〜12）を選択し、各Bootstrapブレークポイントに対して事前定義されたレイアウトプリセットから選択し、オプションでカスタムクラスを持つコンテナを追加できます。生成されるグリッドマークアップはBootstrapの標準クラスを使用し、Bootstrapベースのテーマとの互換性を確保します。
上級ユーザーは、コンテナラッパー、コンテナ、行、個別のカラムにカスタムCSSクラスを適用して、きめ細かなスタイリング制御が可能です。このモジュールはすべてのBootstrap 5ブレークポイント（xs、sm、md、lg、xl、xxl）をサポートし、フルードコンテナやガター削除のオプションも含まれています。
Features
- 視覚的なカラム選択ダイアログ付きのBootstrap Gridツールバーボタンを CKEditor 5に追加
- ブレークポイントごとに複数の事前定義された幅プリセットを持つ1〜12カラムレイアウトをサポート
- テキストフォーマットごとの設定を持つ設定可能なレスポンシブブレークポイント（xs、sm、md、lg、xl、xxl）
- デフォルトコンテナ、フルードコンテナ、カスタムラッパークラスを含むコンテナオプション
- Bootstrapグリッドのガターを削除するNo guttersオプション
- コンテナ、行、個別カラムにカスタムCSSクラスを追加するための詳細設定
- エディタープレビュースタイリング用のオプションのBootstrap CDN統合
- カラム比率を表示する選択ダイアログでの視覚的レイアウトプレビュー
- 既存のグリッド要素を編集するためのコンテキストメニュー統合
- コンテンツを保持しながら既存のグリッド要素を変更可能
Use Cases
2カラムコンテンツレイアウトの作成
コンテンツエディターがテキストと画像をレスポンシブレイアウトで並べて表示する必要があります。Bootstrap Gridボタンをクリックし、2カラムを選択し、中画面以上では66%/33%レイアウトプリセットを選択、モバイルではフル幅を選択します。保存後、各カラムにコンテンツを配置します。
機能カードセクションの構築
サイト構築者が4つの機能カードの行を作成したいと考えています。Bootstrap Gridプラグインを使用して、デスクトップ（lg以上）では等幅の4カラムグリッド、タブレット（md）では2x2、モバイルではフル幅にスタッキングするグリッドを作成します。追加の余白のために行にカスタムクラスを追加します。
フル幅コンテナセクションの追加
マーケティングランディングページ用に、エディターはフルードコンテナラッパーでグリッドを作成し、コンテナラッパーに背景色クラスを追加し、内部に3カラムレイアウトを作成します。no-guttersオプションでカラム間のスペースを削除し、シームレスなデザインを実現します。
レスポンシブサイドバーレイアウト
コンテンツチームがメインコンテンツエリアとサイドバーを必要としています。デスクトップでは75%/25%分割、タブレットでは66%/33%、モバイルではフル幅でスタッキングし、サイドバーがメインコンテンツの下に折りたたまれる2カラムグリッドを作成します。
Tips
- フロントエンドテーマにBootstrap CSSが含まれていることを確認してください。含まれていないとグリッドクラスがライブサイトで正しくレンダリングされません
- 管理テーマにBootstrapが含まれていない場合は、コンテンツ編集時にCDNオプションを使用してください
- 詳細設定ステップでは、py-5やbg-lightなどのユーティリティクラスを追加して素早くスタイリングできます
- 既存のグリッドは右クリックしてコンテキストメニューからEdit Gridを選択することで編集できます
- テキストフォーマット設定で利用可能なカラムを設定して、コンテンツエディター向けのインターフェースを簡素化してください
- レイアウトプリセットは/admin/config/content/ckeditor_bs_gridでサイトごとにカスタマイズできます
Technical Details
Admin Pages 2
/admin/config/content/ckeditor_bs_grid
ブレークポイントラベル、CSSプレフィックス、利用可能なカラムレイアウトプリセットを含むCKEditor Bootstrap Gridプラグインのグローバル設定を構成します。これらの設定はBootstrap Gridプラグインを使用するすべてのテキストフォーマットに適用されます。
/admin/config/content/formats/manage/{format}
CKEditor 5を使用するテキストフォーマットを設定する際にアクセス可能な、Bootstrap Gridプラグインのテキストフォーマットごとの設定。
権限 1
Hooks 5
hook_help
モジュールのヘルプページにヘルプテキストを提供
hook_theme
グリッドオプション用のカスタムフォーム要素ラベルテーマフックを登録
hook_preprocess_form_element
グリッドオプションのラジオボタンにBootstrapクラスとカスタムテーマフックを追加
hook_preprocess_form_element_label
視覚的なカラムプレビューテンプレート用にレイアウトオプション値を準備
hook_config_schema_info_alter
ソース編集でBootstrapグリッドdiv要素を許可するためにSourceEditingRedundantTags制約を削除
Troubleshooting 5
テキストフォーマットのBootstrap Grid設定で「Use BS CDN」を有効にするか、管理テーマにBootstrapグリッドCSSが含まれていることを確認してください。
テキストフォーマットのHTMLフィルター設定を確認してください。classおよびdata-*属性を持つdiv要素が許可されていることを確認してください。
テキストフォーマット設定で、Bootstrap Gridボタンを利用可能なボタンからアクティブツールバーにドラッグしたことを確認してください。
/admin/config/content/ckeditor_bs_gridにアクセスし、有効なブレークポイントとカラム数に対してレイアウトプリセットが設定されていることを確認してください。
フロントエンドテーマにBootstrap 5 CSSが読み込まれていることを確認してください。モジュールはBootstrapクラスを追加するだけで、CSSは利用可能である必要があります。
Security Notes 2
- 詳細設定で入力されたカスタムCSSクラスはHTMLに直接出力されます。信頼できるユーザーがグリッド編集機能にアクセスできるようにしてください。
- このモジュールはソース編集モードでグリッドマークアップを許可するために、CKEditor 5からSourceEditingRedundantTags制約を削除します。