カスタムエディタの変数について
カスタムエディタの変数とは
カスタムエディタの変数は、スクリプトで定義され、カスタムエディタ内やビジュアルエディタのテキストのフォームで{$data.変数名}
という記法で利用できます。
主に利用されるケースは以下です:
- 動的なテキストの表示
- 頻繁に変更するテキストの定義
具体的な利用方法
変数の利用
import {
showAction,
setVariables,
onShow,
} from '@plaidev/karte-action-sdk';
export default () => {
showAction();
// 変数の設定
// 旧Widget APIのwidget.setVal
setVariables({ count: 0 });
// 変数の取得
// 旧Widget APIのwidget.getVal
const current = getVariables();
};
onShow(({ data }) => {
// 別のアクションステートで変数を利用
console.log($data.count);
});
ビジュアルエディタで日付を表示
import moment from 'moment';
import { showAction, setVariables } from '@plaidev/karte-action-sdk';
export default () => {
setVariables({
TODAY: moment().format('YYYY/MM/DD')
});
// ビジュアルエディタのテキストフォームで{$data.TODAY}で利用可能
};
ビジュアルエディタでカウントダウンを表示
import {
getVariables,
setVariables,
updateVariables,
} from '@plaidev/karte-action-sdk';
export default () => {
showAction();
// カウントの初期化
setVariables({ countDown: 30 })
// カウントダウン
setInterval(() => {
const current = getVariables();
if (current.countDown !== 0) {
setVariables({ countDown: current.countDown - 1 })
}
}, 1000);
// ビジュアルエディタのテキストフォームで{$data.countDown}で利用可能
};
キャンペーンページのURLを定義
import {
showAction,
setVariables,
} from '@plaidev/karte-action-sdk';
export default () => {
showAction();
setVariables({ CAMPAIGN_URL: 'https://example.com' })
// ビジュアルエディタのテキストフォームで{$data.CAMPAIGN_URL}で利用可能
};
Updated 10 months ago
What’s Next