メインコンテンツまでスキップ

WYSIWYGエディターのプレースホルダー機能を実装する

概要

WYSIWYGプレースホルダーの機能は柔軟でカスタマイズ可能なコンテンツを作成するための便利なツールです。これを使用することで、予め設定した文書を簡単にコンテンツへ登録できます。
また、複数のコンテンツにまたがる共通のテキスト設定も可能です。

このチュートリアルでは、WYSIWYGプレースホルダー機能、API、およびカスタム処理を使用して、複数のコンテンツにまたがる共通のテキストを設定する方法を説明します。
2つのプレースホルダー、my_namemy_addressを使用し、これらのプレースホルダーが、APIリクエスト時に予設定したテキストへ動的に置換されます。

学べること

以下の手順でWYSIWYGプレースホルダーの機能を設定する方法を学びます。

コンテンツ定義を準備する

コンテンツ定義一覧の画面から[追加]をクリックします。
Image from Gyazo

以下の内容で設定をします。

項目設定
全般名前My Content Structure
項目設定項目設定項目名:WYSIWYG
項目設定:WYSIWYG
WYSIWYGプレースホルダー:my_name,my_address
ヒント

プレースホルダーはカンマ区切りで入力し、カンマの後ろにスペースは入れないことに注意してください。

Image from Gyazo

Image from Gyazo

Image from Gyazo

設定ができたら[追加する]をクリックしてコンテンツ定義を追加します。

コンテンツを作成する

前のステップで作成したコンテンツ定義に2つのコンテンツを作成し、プレースホルダーをコンテンツに入れます。

コンテンツ一覧の画面から[追加]をクリックします。

Image from Gyazo

以下を入力し、[追加する]をクリックします。

項目設定
タイトルMy First Content
WYSIWYGMy nameMy Addressを利用した任意の文章。
プレースホルダーを設定すると、WYSIWYGエディターの機能にPlaceholderが追加されるのでこちらからプレースホルダーを設定してください。

Image from Gyazo

以下を入力し、[追加する]をクリックします。

項目設定
タイトルMy Second Content
WYSIWYGMy nameMy Addressを利用した任意の文章。
プレースホルダーを設定すると、WYSIWYGエディターの機能にPlaceholderが追加されるのでこちらからプレースホルダーを設定してください。

Image from Gyazo

カスタム処理を作成する

次に、my_namemy_addressプレースホルダーを設定したテキストに置換するカスタム処理を作成します。

[オペレーション] -> [カスタム処理]をクリックします。

Image from Gyazo

[追加]をクリックします。

Image from Gyazo

以下のように入力します。

項目設定
タイトルReplase placeholders in content
識別子replase_placeholders_in_content
処理以下のコード
{* For every contents in the list *}
{foreach from=$json.list item='row' key='key'}
{* Replace placeholder my_name with "Diverta" *}
{assign var=json.list.$key.content
value=$json.list.$key.content|replace:"<span class=\"placeholder\">`$smarty.ldelim`my_name`$smarty.rdelim`</span>":'Diverta'}
{* Replace placeholder my_address with the real address value *}
{assign var=json.list.$key.content
value=$json.list.$key.content|replace:"<span class=\"placeholder\">`$smarty.ldelim`my_address`$smarty.rdelim`</span>":'Central Plaza 6F 1-1 Kaguragashi Shinjuku-ku, Tokyo, Japan'}
{/foreach}

{$json|@json_encode:$smarty.const.JSON_UNESCAPED_UNICODE}

Image from Gyazo

入力ができたら[追加する]をクリックしてカスタム処理を追加します。

APIエンドポイントを作成する

Contentカテゴリ、モデルトピック、オペレーションリストを持つ1つのAPIエンドポイントを作成します。前のステップで作成したコンテンツ定義のIDを「topics_group_id」パラメータに設定します。

エンドポイントを追加する

エンドポイント一覧のページから、[新しいエンドポイントの追加]をクリックします。

Image from Gyazo

以下のエンドポイントを作成します。

項目設定内容
パスmy-content
カテゴリーコンテンツ
モデルTopics
オペレーションlist
topics_group_id作成したコンテンツ定義のID

Image from Gyazo

設定ができたら[追加する]をクリックしてエンドポイントを追加します。

エンドポイントに後処理を追加する

前のステップで作成したカスタム処理をエンドポイントの後処理に設定します。
エンドポイント一覧のページから[後処理]をクリックします。

Image from Gyazo

APIのレスポンスを簡素化するために、「出力許可リスト」ポストプロセスも追加し、以下のように設定します。

項目設定内容
出力許可リストlist.subject
list.content
カスタム処理Replase placeholders in content

Image from Gyazo

設定ができたら[保存する]をクリックして後処理の設定を保存します。

結果を確認する

SwaggerUIでAPIエンドポイントを取得し、結果を確認します。

エンドポイント一覧のページから[SwaggerUI]をクリックします。

Image from Gyazo

作成したエンドポイントの[Try it out]をクリックします。

Image from Gyazo

[Execute]をクリックします。

Image from Gyazo

以下のように、プレースホルダーを設定した部分が、カスタム処理で設定したテキストに置き換わっていることが分かります。

Image from Gyazo

関連ドキュメント


サポート

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。