Action Text trong Ruby on Rails

Đăng bởi Lưu Đại vào ngày 29-12-2022

1. Mở bài: 

Rails là một framework lớn có viết rất nhiều tính năng có sẵn để build một trang web. Một trong những điều mình thích khi làm việc với Rails là khi mình có một ý tưởng nào đó thì hầu như Rails luôn có sẵn thư viện hỗ trợ, đảm bảo các chức năng cơ bản.
* Các chức năng, ý tưởng phức tạp hơn thì thường tới từ khách hàng =))
Khi xây dựng trang blog này cũng vậy mình tìm về những thứ Rails đã hỗ trợ sẵn để ra sản phẩm nhanh nhất có thể. Sau này thêm thắt gì thì tìm thư viện, hay là viết thêm chức năng sau.

2. Thân bài: 

Action Text là một thư viện có sẵn trong Rails bao gồm một trình soạn thảo văn bản (trix editor) thư viện css để hiển thị format text, một model để lưu trữ văn bản được thêm vào. 
Để sử dụng ActionText thì cần đi qua một số các bước sau: 
Chạy bin/rails action_text:install. Lệnh này sẽ thêm các file css view cần thiết cho việc hiển thị editor + nội dung content của viết ra ngoài màn hình cho người dùng nhìn thấy. Các file được tạo ra bao gồm: 
- app/assets/stylesheets/actiontext.css -> file này để style cho nội dung hiển thị ra màn hình người dùng như bài blog này đây. Mặc định khi hiển thị nội dung này mình sẽ bọc nó trong một html element cha có class là trix-content. 
- app/views/active_storage/blobs/_blob.html.erb -> file này để hiển thị file đính kèm, nếu file đính kèm có thể hiển thị được (ví dụ như ảnh video) thì nó sẽ hiển thị ảnh ra. Một phần nữa là nó sẽ hiển thị tên file và file size nếu không muốn hiển thị file size hoặc có yêu cầu hiển thị đặc biệt với các tệp đính kèm thì có thể sửa trong file này. 
- create_active_storage_tables.active_storage.rb -> tạo ra 3 bảng active_storage_blobs, active_storage_attachments, active_storage_variant_records đây là 3 bảng của active storage action text sử dụng mặc định active storage để lưu các file đính kèm.
- create_action_text_tables.action_text.rb -> Tạo ra table action_text để lưu dữ liệu được nhập từ trix editor. 
class CreateActionTextTables < ActiveRecord::Migration[6.0]
   def change
     create_table :action_text_rich_texts do |t|
       t.string     :name, null: false
       t.text       :body, size: :long
       t.references :record, null: false, polymorphic: true, index: false
 

       t.timestamps
 

       t.index [ :record_type, :record_id, :name ], name: "index_action_text_rich_texts_uniqueness", unique: true
     end
   end
 end
File này chỉ gồm 3 trường name, body và một quan hệ polymorphic là record để liên kết với các model khác có sử dụng rich_text. Như mọi người thấy là body cũng chỉ là một trường long text (tiny text < text < medium text < long text) định dạng long text có thể lưu tới 4,294,967,295 ký tự :).
image.png

Body sẽ được lưu dưới dạng như này, còn name là tên quan hệ được định nghĩa trong model để liên kết với RichText.
* Note: model RichText là một model có sẵn của Rails 

Tiếp theo cần phải thêm liên kết vào trong model nữa. 
has_rich_text :content
thế này là okay dòng này sẽ khai báo quan hệ 1-1 với model RichText và một hàm content? để check xem có bản ghi 
action_text_rich_texts nào liên kết với bản ghi hiện tại không?
image.png
Sau liên kết trong model thì sẽ tới view. 
Đầu tiên phải thêm thư viện scss và javascript application.scss và application.js đã 
# apllication.scss
...
@import "trix/dist/trix";
...

# application.js
...
require("trix")require("@rails/actiontext")
...

Đầu tiên là ô input textarea giờ sẽ biến hóa thành trix editor. 
<div class="form-group">  
  <%= form.label :content, 'Content' %>  
  <%= form.rich_text_area :content, class: 'min-vh-60' %>
</div>

Và phần hiển thị 
<div class="content-area">  
  <main class="trix-content site-main">
    <%= @post.content %>
  </main>
</div>

3. Kết bài. 

Như vậy là xong phần tổng quan về action text. Đây là những gì mình học được khi sử dụng action text và khi viết bài này. Tuy vẫn còn nhiều câu hỏi như action text có thể liên kết 1-n không? và có thể chèn thêm icon cho trix editor không?. Trong tương lai mình sẽ cố vọc vạch nhiều hơn để tìm hiểu thằng này.