Discourse で AddEvent コードが機能しない

サポート
1

Discourse にイベントカレンダーのコードを追加しようとしています。4 つのスペースでインデントしましたが、うまくいかないようです。

以下がコードスニペットです：

image

これが表示された結果です…

image
image764×387 64.9 KB

私は普段コードを書かないので、専門用語を簡単に説明していただければ非常に助かります。:pray:

2

ここでの原因は、Discourse がセキュリティ対策として投稿内のユーザー入力をフィルタリングしていることです。ランダムなユーザーがあなたのサイトでスクリプトを実行することを防ぐため、それらをフィルタリングしています。

テーマコンポーネントを使用することでこれを動作させることができます。新しいテーマコンポーネントの「ヘッダー」タブに以下のようなコードを追加し、アクティブなテーマに適用すれば、その埋め込みを使用できるようになります。

<script type="text/discourse-plugin" version="0.8">
  const  loadScript  = require("discourse/lib/load-script").default;
  const { next } = require("@ember/runloop");

  api.decorateCookedElement(
    post => {
      const calendars = post.querySelectorAll(`[data-wrap="addEvent"]`);
      if (!calendars.length) return;

      calendars.forEach(calendar => {
        const wrapper = document.createElement("div");
        wrapper.dataset.calendar = calendar.dataset.calendar;
        wrapper.dataset.configure = false;
        wrapper.classList.add("ae-emd-cal");
        calendar.append(wrapper);
      });

      next(() =>
        loadScript("https://addevent.com/js/cal.embed.t1.init.js")
      );
    },
    { id: "AddEvent decorator", onlyStream: true }
  );
</script>

これを行えば、投稿に以下のような記述を追加することで、AddEvent のカレンダーを投稿に追加できます。

[wrap=addEvent calendar=bJ306355][/wrap]

calendar=bJ306355 属性を変更して、埋め込みたいカレンダーの固有識別子を指定できます。

最後に、サイト設定で AddEvent スクリプトをホワイトリストに登録する必要があります（これもセキュリティ層の一つです）。

管理画面で content_security_policy_script_src を検索し、そこに以下のリンクを追加してください。

https://addevent.com

これで動作するか確認してください。問題なければ、これをテーマコンポーネントとしてパッケージ化することも可能です。

3

@Johani さん、こんにちは。

ご提示いただいたソリューションで問題なく動作しました。お伝えしたく、ご連絡いたしました。

ありがとうございます！

4

さて、AddEvent カレンダーをレンダリングするための新しいテーマコンポーネントを作成しました。

:link: GitHub - graydenshand/discourse_upcoming_addevent: Replace the DiscourseEvent "upcoming events" calendar with an AddEvent embed · GitHub

投稿内にカレンダーを埋め込むと、埋め込みのデスクトップ版を表示するには幅が狭すぎるため、このテーマコンポーネントは DiscourseCalendar プラグインの「Upcoming Events」ページを乗っ取る形にしています。

なお、これを行うためには、ページ遷移間の再レンダリングを可能にするために、AddEvent スクリプト (https://addevent.com/js/cal.embed.t1.init.js) をカスタマイズする必要がありました。