Chatbox with icon

Giới thiệu

Mình sẽ giới thiệu với các bạn thử viện js hổ trợ việc add icon, bằng cách sử dụng gem "rails_emoji_picker"

Cài đặt

gem 'rails_emoji_picker'

• Sau đó "bundle install" or "rails g rails_emoji_picker:install"
• application.js

//= require rails_emoji_picker

• application.css

*= require rails_emoji_picker

@import 'rails_emoji_picker'

• config lại database.yml

  encoding: utf8mb4
  charset: utf8mb4
  collation: utf8mb4_unicode_ci

Thêm file config/initializers/utf8mb4.rb

require "active_record/connection_adapters/abstract_mysql_adapter"

module ActiveRecord
  module ConnectionAdapters
    class AbstractMysqlAdapter
      NATIVE_DATABASE_TYPES[:string] = {:name => "varchar", :limit => 255}
    end
  end
end

• Nhớ reset lại database nhé

Sử dụng

• Chỉ cần thêm class: "emoji-picker-container" và thêm data: {emojiable: true} trong thẻ input

   <div class="col-md-10 margin-left-10 emoji-picker-container">
     <%= f.text_field :content, class: "form-control", rows: 3, data: { emojiable: true } %>
   </div>

• Khi show ra thì nên add thêm method content_with_emoji

<%= content_with_emoji(comment.content) %>

Kết quả

Tài liệu tham khảo

https://github.com/ID25/rails_emoji_picker Chúc các bạn thành công.