Payload CMSにビジュアルエディターを追加
このプラグインは、編集担当者がPayloadでページを組み立て、サイト上でも直接変更できるようにするために開発しました。利用できるコンポーネントや設定項目、サイト上での表示方法は開発者が定義します。
管理画面でも、実際のページ上でも編集
管理画面のWidgetモード
Widgetモードでは、Payloadのコンテンツフィールド内にPage Composerを配置します。編集担当者はコンポーネントをドラッグして並べ、テキスト、画像、スタイルを変更し、Payloadの通常の操作で保存や公開ができます。エディターはiframeを使わず、管理画面内で直接動作します。
サイト上でのビジュアル編集
編集権限のあるユーザーは、サイト上でLiveモードを開くこともできます。実際のヘッダーやフッターと一緒に変更内容を確認でき、その場で下書きを保存したり公開したりできます。どちらのモードも同じコンテンツを編集します。
編集担当者が使える項目を定義
各コンポーネントには、個別のフィールド設定とサイト表示用のレンダリング関数があります。テキスト、リッチテキスト、画像、ドロップダウン、繰り返しフィールド、設定グループを、コンテンツに合わせて組み合わせられます。フィールド設定がエディター内の項目を決め、レンダリング関数がサイト上の見た目を決めます。
たとえば、ページ冒頭のヒーローセクションなら、画像、タイトル、サブタイトルだけで十分かもしれません。後からリンクや背景色が必要になれば、コンポーネントの設定に追加できます。
プラグインでできること
テンプレートとプリセット
レイアウト全体をテンプレートとして保存したり、コンポーネントの設定をプリセットとして保存したりできます。再利用できるので、ページごとに一から設定する必要がありません。
パソコン・タブレット・スマートフォン向けのスタイル
余白、文字のスタイル、レイアウトを画面サイズごとに調整できます。設定は公開ページの表示にも反映されます。
Payloadの既存機能と連携
コンテンツはPayloadのJSONフィールドに保存され、メディアライブラリ、下書き、バージョン管理、アクセス制御と連携します。フィールドはコレクションやグローバルにも追加できるため、ページ以外にも利用できます。
Payload CMS向けPage Composer
プラグインの詳細、価格、連携部分のソースコードをご覧いただけます。