Quantcast
Channel: Ruby on Railsの記事一覧|TechRacho by BPS株式会社
Viewing all articles
Browse latest Browse all 1406

Rails 7: Action Text添付ファイルのHTMLタグ名がカスタマイズ可能になった(翻訳)

$
0
0

概要

原著者の許諾を得て翻訳・公開いたします。

日本語タイトルは内容に即したものにしました。

Rails 7: Action Text添付ファイルのHTMLタグ名がカスタマイズ可能になった(翻訳)

Rails 7に、Action Textの添付ファイルのデフォルトHTMLタグ名をカスタム文字列に設定する機能が追加されました(#41158)。

変更前

Rails 6までは、Action TextのデフォルトHTMLタグ名はaction-text-attachmentになります。

Action Textのリッチテキストフィールドを添付ファイルでレンダリングすると以下のようなHTMLが生成されます。

<div class="trix-content">
  <div>
    <action-text-attachment sgid="BAh7CEki..." content-type="image/png" url="http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiO.../saeloun%20logo.png" filename="saeloun logo.png" filesize="9613" width="600" height="600" previewable="true" presentation="gallery">
      <figure class="attachment attachment--preview attachment--png">
          <img src="http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiO.../saeloun%20logo.png">

        <figcaption class="attachment__caption">
            <span class="attachment__name">saeloun logo.png</span>
            <span class="attachment__size">9.39 KB</span>
        </figcaption>
      </figure>
    </action-text-attachment>Description for the blog<br><br><br>
  </div>
</div>

このrich_text出力を解析してから、nokogiriでタグ名を変更することは可能です。

変更後

Rails 7では、以下の設定オプションを用いて添付ファイルのデフォルトHTMLタグ名をシンプルかつすっきりと設定できる方法が追加されました。

  # config/application.rb
  config.action_text.attachment_tag_name = "saeloun-rich-text-attachment"
<div class="trix-content">
  <div>Description for the blog<br>
    <saeloun-rich-text-attachment sgid="BAh7CEki..." content-type="image/png" url="http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiO.../saeloun%20logo.png" filename="saeloun logo.png" filesize="9613" width="600" height="600" previewable="true" presentation="gallery">
      <figure class="attachment attachment--preview attachment--png">
          <img src="http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiO.../saeloun%20logo.png">

        <figcaption class="attachment__caption">
            <span class="attachment__name">saeloun logo.png</span>
            <span class="attachment__size">9.39 KB</span>
        </figcaption>
      </figure>
    </saeloun-rich-text-attachment><br><br><br>
  </div>
</div>

原注: 既存のRailsプロジェクトで添付ファイルのHTMLタグ名を変更しても、以前の添付ファイルのHTMLタグ名がすべて更新されるわけではないので、新しい設定を導入してからレコードを更新するまではレンダリングされません。

そのようなリッチテキストのレコードをレンダリングしようとするとタグがサニタイズされるので、添付ファイルのHTMLのレンダリングはすべてスキップされます。

タグ名を以前の設定に戻すと、添付ファイルは従来どおりレンダリングされます。

関連記事

Rails 7: Active ModelからActiveModel::APIが切り出された(翻訳)

The post Rails 7: Action Text添付ファイルのHTMLタグ名がカスタマイズ可能になった(翻訳) first appeared on TechRacho.


Viewing all articles
Browse latest Browse all 1406

Latest Images

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

Trending Articles



Latest Images

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭