4

Rails 6.0.0 アプリを作成しており、次のモジュールがあります。

  • Web - フォーム / Cruds
  • アピ

Action Textを使用する CRUD があります。フォームは問題なく動作しています。Action Text アーティファクトの実装に成功しました。

先に進むために、フォームを介して作成されたリソースを公開する JSON API を作成しました。出力 JSON は次のようになります。

{
    "id": 3,
    "title": "Happy title",
    "content": {
        "id": 1,
        "name": "content",
        "body": "<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget tortor venenatis elit laoreet sagittis. In hac habitasse platea dictumst. Mauris nec nisl dapibus sem volutpat ultricies vel eu erat. Nunc at aliquet diam, vel pretium velit. <br><br><action-text-attachment sgid=\"BAh7CEkiCGdpZAY6BkVUSSI0Z2lkOi8vZXhpbi13ZWIvQWN0aXZlU3RvcmFnZTo6QmxvYi81P2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7AFRJIg9hdHRhY2hhYmxlBjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--8f909146395a3dede0d4d5e47ad54d82d9e06367\" content-type=\"image/png\" url=\"http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--6a79e95fd7a0fc0883190bd1201d4f5ecb1f8445/qrcode%20(2).png\" filename=\"qrcode (2).png\" filesize=\"497\" width=\"400\" height=\"400\" presentation=\"gallery\"></action-text-attachment><br><br><strong>Phasellus</strong> at dictum ligula. Sed tempus odio sed elit ultricies, in pulvinar purus dictum. Suspendisse sit amet fermentum lacus. Suspendisse sed tristique lectus.</div>",
        "record_type": "Announcement",
        "record_id": 3,
        "created_at": "2019-10-30T23:25:24.080Z",
        "updated_at": "2019-10-30T23:25:24.138Z"
    },
    "created_at": "2019-10-30T23:25:24.039Z",
    "updated_at": "2019-10-30T23:25:24.139Z"
}

問題：

ご覧のとおり、content.body 属性には Rails Action Text タグがあります。

<action-text-attachment sgid...>

1 日の終わりのフォームで、Rails アクション テキストは、画像をレンダリングするために、このタグを図の HTML タグに変換します。

<figure class="attachment attachment--preview attachment--png">
    <img src="http://localhost:3000/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--6a79e95fd7a0fc0883190bd1201d4f5ecb1f8445/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VY21WemFYcGxYM1J2WDJ4cGJXbDBXd2RwQWdBRWFRSUFBdz09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--defcd74f258f74bba5b028de265f7a5858cffd0b/qrcode%20(2).png">

  <figcaption class="attachment__caption">
      <span class="attachment__name">qrcode (2).png</span>
      <!--<span class="attachment__size"></span>-->
  </figcaption>
</figure>

質問：

JSON API を使用して同じ HTML をレンダリングするにはどうすればよいですか?

複数のクライアント アプリでレンダリングするには、このコンテンツを公開する必要があります。

4

2 に答える 2