インラインPDFプレビュー機能

試しましたが、cors originshttps://xxxxx.s3.us-east-2.amazonaws.com に設定し、/var/discourse/containers/app.yml DISCOURSE_ENABLE_CORS: true も設定しましたが、機能しません。

「いいね!」 1

./launcher rebuild app を実行しましたか? app.yml を変更した後、ブラウザのハードリフレッシュも必要になる場合があります。

「いいね!」 2

ちなみに、この機能に影響を与える設定を変更したかどうかを確認するために、管理者設定のファイルセクションを確認することもできます。また、別のサーバーでホストされているPDFにリンクしている場合、この機能が機能することは期待できないと思います。私も自分のサイトでこれをテストしましたが、リモートで提供された同じPDFはプレビューを表示しませんでした。

問題の原因を見つけたらお知らせください!

リモートでは機能しなかったが、ローカルでアップロードしたものは機能した投稿のサンプルマークダウン

remote:

[test remote pdf](https://jsoncompare.org/LearningContainer/SampleFiles/PDF/sample-pdf-with-images.pdf)

uploaded locally:

[sample-pdf-with-images.pdf|attachment](upload://uOJLgHidEXnbqPRn2p6yP10ecQU.pdf) (3.8 MB)

見た目:

「いいね!」 3

はい。しかし、うまくいきませんでした。

Discourse で S3 を有効にすると


定義上、ファイルは別のドメインに保存されます。
これで問題は解決したと思います。しかし、S3 が有効になっている Discourse インストールをプラグインがサポートできるように改善されることを願っています。

「いいね!」 2

この構成にはあまり慣れていません。これらの手順に従いましたか?

「いいね!」 1

はい、S3(および関連する「セキュアメディア」設定)は過去数年間問題なく動作していました。
この設定で動作しないのは、インラインPDFコンポーネントのみです。

参考までに、app.ymlを次のように設定しても:

DISCOURSE_ENABLE_CORS: true
DISCOURSE_CORS_ORIGIN: ‘*’

役に立ちません。

「いいね!」 2

私もまったく同じ問題に遭遇し、このTCを機能させるためにS3のアップロードを元に戻すことになりました。これは私たちにとって非常に価値があるためです。

これは#officialであり、S3のアップロードが推奨されているので、何らかの方法でS3で動作するように見直されるべきだと思います。PDFがS3のアップロードから特別に除外されている可能性がありますが、一部は巨大なのでそれは残念です!

「いいね!」 6

誰も反対しないと思います。
これは認識と優先順位の問題だと思います。
少なくとも「認識」に関しては、OPの@Johaniさんが、この議論のトピックに、インラインPDFコンポーネントがS3が有効になっていると機能しないという簡単な注意書きを追加できるかもしれません。
これにより、他の人がトラブルシューティングに費やす時間を節約し、問題への認識を高めることができます。

「いいね!」 3

これらの投稿には、オートタイマーから取り出したS3に関する情報がいくつかありますが、お役に立つでしょうか?

「いいね!」 7

投稿が既存のトピックにマージされました: Theme-Component Topics project

はい、うまくいきました :smiley:
参考までに、他に必要とする方のために:

  1. AWSコンソールバケット https://s3.console.aws.amazon.com/s3/buckets に移動し、Discourseのインストールに使用されたバケットを選択します。

  2. 「権限」タブを選択します。
    image

  3. 「クロスオリジンリソース共有(CORS)」までスクロールダウンし、以下を記述します。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "https://my-site.com"
        ],
        "ExposeHeaders": []
    }
]

このようになります。

「いいね!」 11

S3アップロード中にそれを見つけられていたらよかったのに!!

今、再検討する必要があるかもしれません。@JammyDodger、他の人がつまずかないように、S3とこのOPの両方に注意すべきだと思いますか。

「いいね!」 5

まったくその通りです。:+1: 編集方法を考える前に、それが機能したという確認を待っていました。:slightly_smiling_face:

「いいね!」 7

同じ問題に対処する2つのアイデア:Discourseのビューポートはかなり狭いため、ほとんどのPDFはインラインで読むには小さすぎます。これに対処するために、次のことができます。

a) PDF iframeをリサイズ可能にしますか?すでにCSSで試しましたが、うまくいきませんでした。基盤となるグリッドが邪魔をしているようです。
b) ダウンロードリンクの他に、「新しいタブで開く」という2番目のリンクを提供しますか?フォーラムからあまり多くのものをダウンロードしたくないのです。

「いいね!」 5

これは大きな改善になるでしょう!そして、それほど難しい追加ではないと思います。数日中に余裕ができれば、これに対するPRを試してみるかもしれません。

「いいね!」 4

(b) は、たとえばインライン表示か新規タブで開くかのオプションとして既に提供されていると思います。ユーザーがインライン表示と新規タブで開くの両方を見られるようにする 3 番目のオプションはどうでしょうか。このアイデアも気に入っています。

(a) は、投稿で物事を正しく表示するのがいかに難しいかを考えると、難しいかもしれません。

「いいね!」 3

ツールバーに、PDFをインラインではなくフルスクリーンで表示するだけの展開ボタン

があれば嬉しいです。

「いいね!」 3

@Ralf_Stockmann@Alon1 は試しましたか…

また、私のDiscourseではこの方法を使用しています…

GoogleドライブからPDFを埋め込む

(これは私が推奨する方法です。iFrame内のPDFはレスポンシブになります。他の方法のほとんどは、クロスブラウザでのレスポンシブに失敗します。)

  1. 共有
  2. 共有リンクをコピー
  3. 共有リンクを新しいタブで開く
  4. 右上隅の3つの縦ドットをクリック
  5. アイテムを埋め込むを選択
  6. 表示されたiFrameコードをコピー
  7. Discourseエディタに貼り付ける

ここにGoogleドライブのテストPDFが埋め込まれています。これは\u003c\u003cここからダウンロード\u003e\u003eできます。

<iframe src="https://drive.google.com/file/d/1KQ-jn7R0NmZxw955QaPu3lvLFh5zpnDe/preview" width="640" height="480" allow="autoplay"></iframe>

このように表示されます…(私のサイトのこちらでライブで試すこともできます)

「いいね!」 3

素晴らしいです!
(1) IFrame Lightboxes テーマコンポーネントをインストールし、(2) コンポーネント設定の「iframe のオリジン ドメイン」リストに自分のウェブサイトの URL を追加するだけで機能しました!PDF のインラインの右上隅のすぐ上に展開ボタンが追加されます。

すぐに使えます :slight_smile:

「いいね!」 4

新しいタブでPDFを開くことがまだできなかったので、すべてのローカルPDFをcontent-disposition: inlineで提供する小さなプラグインを作成しました。

「いいね!」 4