ユニバーサルエディターのカスタマイズと拡張 customizing-extending

コンテンツ作成者のニーズに合わせてユニバーサルエディターのオーサリングエクスペリエンスをカスタマイズできる様々な拡張ポイントとその他の機能について説明します。

概要 overview

ユニバーサルエディターでは、プロジェクトのニーズに合わせて 2 つのタイプの適応が可能です。

次の節では、両方のタイプについて説明します。

ユニバーサルエディターのカスタマイズ customizing

ユニバーサルエディターには、機能をカスタマイズするためのビルトインオプションがいくつか用意されています。

公開の無効化 disable-publish

特定のオーサリングワークフローでは、コンテンツを公開する前に確認する必要があります。このような場合、どの作成者も公開オプションを使用できません。

次のメタデータを追加することで、「公開」ボタンを完全にアプリ内で抑制できます。

<meta name="urn:adobe:aue:config:disable" content="publish"/>

コンポーネントのフィルタリング filtering-components

ユニバーサルエディターを使用する場合、コンテナコンポーネントごとに許可されるコンポーネントを制限できます。 これを行うには、フィルター定義を指す、スクリプトタグをさらに追加導入する必要があります。

<script type="application/vnd.adobe.aue.filter+json" src="/static/filter-definition.json"></script>

フィルター定義は次のようになり、コンテナにテキストと画像の追加のみを許可するように制限します。

[
  {
    "id": "container-filter",
     "components": ["text", "image"]
   }
]

次に、プロパティ data-aue-filter を追加してコンテナコンポーネントからフィルター定義を参照することができるので、以前に定義したフィルターの ID を渡します。

data-aue-filter="container-filter"

フィルター定義の components 属性を null に設定することによって、フィルターがない場合と同様に、すべてのコンポーネントを許可します。

[
  {
    "id": "another-container-filter",
     "components": null
   }
]

プロパティパネルでのコンポーネントの条件付き表示/非表示 conditionally-hide

1 つまたは複数のコンポーネントを一般的に作成者が利用できる場合がありますが、意味をなさない状況が発生する場合もあります。その場合、コンポーネントモデルの フィールドに condition 属性を追加することで、プロパティパネルでコンポーネントを非表示にすることができます。

条件は、 JsonLogic スキーマを使用して定義できます。 条件が true の場合、フィールドが表示されます。条件が false の場合、フィールドは非表示になります。

サンプルモデル

code language-json
{ "id": "conditionally-revealed-component", "fields": [ { "component": "boolean", "label": "Shall the text field be revealed?", "name": "reveal", "valueType": "boolean" }, { "component": "text-input", "label": "Hidden text field", "name": "hidden-text", "valueType": "string", "condition": { "===": [{"var" : "reveal"}, true] } } ] }

条件 False

条件 True

カスタムプレビュー URL custom-preview-urls

カスタムプレビュー URL は、urn:adobe:aue:config:preview メタ設定を使用して指定できます。この URL は、エディターの右上のツールバーにある「ページを開く」ボタンをクリックすると開きます。

これは、WYSIWYG オーサリングを備えた Edge Delivery Services を使用するアプリケーションなど、特定のプレビュー要件を持つアプリケーションに特に役立ちます。

これを行うには、次の例のように、実装されたアプリのメタタグに目的のプレビュー URL を含めるのみです。

<meta name="urn:adobe:aue:config:preview" content="https://wknd.site"/>

ユニバーサルエディター UI の拡張 extending

Adobe Experience Cloud サービスとして、ユニバーサルエディターの UI は、App Builder とExperience Manager を使用して拡張できます。

UI 拡張機能は、Adobe App Builder で作成された JavaScript アプリケーションで、ユニバーサルエディターなどの Adobe Experience Cloud 統合シェルで実行される UI アプリケーションに埋め込むことができます。ヘッダーメニューとプロパティパネルに独自のボタンとアクションを追加したり、ユニバーサルエディター用に独自のイベントを作成したりできます。

これらの可能性を調べるには、次のリソースを参照してください。

AEM Sites での Extension Manager の使用 拡張機能をインスタンスごとに有効または無効にしたり、ユニバーサルエディターを含むアドビのファーストパーティ拡張機能にアクセスしたりできます。