Hôm này mình xin giới thiệu một bài về cách tạo emoji trong Rails application. Bạn có thể tạo emoji picker rất nhanh và dễ dàng với gem 'rails_emoji_picker' để áp dụng cho website của bạn giống như các ứng dụng chat khác .

Preview

Installation

Add gem file:

gem 'rails_emoji_picker'

Usage

chạy command sau: nó sẽ tạo các emoji images vào trong thư mục /assets/images của bạn.

rails g rails_emoji_picker:install

Thêm emoji picker js file:

application.js

//= require jquery
//= require rails_emoji_picker
//= require_tree .

Thêm style:

application.css

/*
 *= require_tree .
 *= require rails_emoji_picker
 *= require_self
 */

import .scss hoặc sass:

@import 'rails_emoji_picker'

Bây giờ bạn đã xong phần config. Bạn chỉ cần wrap text input vào trong class emoji-picker-container và thêm data-attribte data: { emojiable: true } cho input là được.

<p class="emoji-picker-container">
  <%= f.text_field :title, class: 'form-control', data: { emojiable: true } %>
</p>

Refresh lại browser thì sẽ được kết quả như trên.

Để hiển thị emoji trong view, bạn có thể sử dụng helper của nó: content_with_emoji:

 <%= content_with_emoji(@post.title) %>

Nếu bạn cần kết nối với string khác, thì bạn sử dụng như sau:

<%= "Post body: #{content_with_emoji(@post.body)}".html_safe %>

Emoji Asset Host

Mặc định khi sử dụng với Rails, thì gem này kế thừa từ Rails configured: Rails.asset_host. Nếu bạn muốn thay đổi asset_host , thì làm như sau:

# => /initializers/emoji_picker.rb

Emoji.asset_host = 'http://mysite.com'
Emoji.asset_path = '/ID25/rails_emoji_picker/master/lib/generators/rails_emoji_picker/emoji/'

Kết thúc

Bạn thấy rằng bạn có thể tạo emoji cho website của bạn rất nhanh và dễ dàng. Chi tiết hơn, hãy tham khảo tài liệu của gem này ở đây: https://github.com/ID25/rails_emoji_picker