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

概要

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

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

学べること

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

コンテンツ定義を準備する
コンテンツを作成する
カスタム処理を作成する
APIエンドポイントを作成する
結果を確認する

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

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

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

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

ヒント

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

Image from Gyazo

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

コンテンツを作成する

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

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

Image from Gyazo

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

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

Image from Gyazo

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

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

Image from Gyazo

カスタム処理を作成する

次に、my_nameとmy_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}