Tạo Emoji sử dụng Rails Emoji Picker

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