12/08/2018, 16:59

Rails gem gemoji

Emoji là các biểu tượng và hình mặt cười được sử dụng trong các tin nhắn điện tử và các trang web. Gem gemoji hỗ trợ hiển thị emoji đối với các trang web được phát triển bằng RoR. Link tham khảo: https://github.com/github/gemoji. a. Cài đặt: Thêm gem "gemoji" vào Gemfile. gem ...

Emoji là các biểu tượng và hình mặt cười được sử dụng trong các tin nhắn điện tử và các trang web. Gem gemoji hỗ trợ hiển thị emoji đối với các trang web được phát triển bằng RoR. Link tham khảo: https://github.com/github/gemoji.

a. Cài đặt:

  • Thêm gem "gemoji" vào Gemfile.
gem "gemoji"
  • Chạy bundle install để cài đặt gem "gemoji".
bundle install

b. Extract images để hiển thị image cho emoji:

  • Để extract image hiển thị emoji trên web và lưu vào thư mục public/images/emoji , ta chạy câu lệnh
bundle exec gemoji extract public/images/emoji
  • Đối với các máy chạy hệ điều hành window hoặc ubuntu, ta nhận được lỗi Errno::ENOENT
  • Theo source code của gem gemoji, nguyên nhân lỗi là do hệ điều hành ubuntu và window không có file Apple Color Emoji.ttc
  • Emoji::Extractor sử dụng biến EMOJI_TTF để lưu file ttc chứa toàn bộ hình ảnh emoji của hệ điều hành.
EMOJI_TTF = "/System/Library/Fonts/Apple Color Emoji.ttc"
  • Ta có thể download file Apple Color Emoji.ttc tại đây , trong source code tham khảo có để file Apple Color Emoji.ttc tại thư mục vendor.
  • Ta cũng sửa lại source của gem gemoji tại máy sau khi đã cài đặt gem gemoji cho project.
  • Mở file gemoji/lib/emoji/extractor.rb sửa giá trị của biến EMOJI_TTF về đường dẫn của file Apple Color Emoji.ttc lưu tại thư mục vendor của project.
  • Chạy lại câu lệnh extract image.
bundle exec gemoji extract public/images/emoji
  • Image sau khi extract được lưu tại thư mục public/images/emoji của source code tham khảo.

c. EmojiHelper:

  • Xem danh sách các emoji tại đây.
  • Tạo EmojiHelper, viết hàm emojify(content) để thay thế các emoji có trong chuỗi content bằng hình ảnh tương ứng.
module EmojiHelper
  def emojify content
    h(content).to_str.gsub(/:([w+-]+):/) do |match|
      if emoji = Emoji.find_by_alias($1)
        %(<img alt="#$1" src="#{image_path("emoji/#{emoji.image_filename}", skip_pipeline: true)}" style="vertical-align:middle" awidth="20" height="20" />)
      else
        match
      end
    end.html_safe if content.present?
  end
end
  • Ta tạo model post có 2 cột title và content để test hàm emojify.
rails generate scaffold post title:string content:string
  • Sau khi chạy câu lệnh scaffold, ta tạo 1 bài post có nột dung là it's raining             </div>
            
            <div class=
0