Uriji Emoji Picker

Simple integration of emoji picker with your rails application.



Uriji Emoji Picker


Add this line to your application's Gemfile:

gem 'uriji_emoji_picker'


Run command

rails g uriji_emoji_picker:install

It copies emoji images to your /assets/images directory

Add emoji picker js file


//= require jquery
//= require uriji_emoji_picker
//= require_tree .
And styles


 *= require_tree .
 *= require uriji_emoji_picker
 *= require bootstrap
 *= require_self

application.scss or sass

@import 'uriji_emoji_picker'

Next step, wrap your text input with css class emoji-picker-container

And add data-attribte data: { emojiable: true } to your input/text_area.

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

To see emoji in views, wrap your text with helper content_with_emoji.

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

If you interpolate string, you need to call html_safe, because it's another string.

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

Emoji Asset Host

By default when used with Rails, this gem will inherit Rails configured Rails.asset_host. Otherwise, you will need to manually configure the Emoji.asset_host as a string URL or a lambda/proc.

# String URL
Emoji.asset_host = 'http://mysite.com'

# Custom Host Proc, takes asset path as a param
Emoji.asset_host = lambda {|path| path.size % 2 == 0 ? 'http://even.com' : 'http://odd.com'}


Precompile emoji images in development for fast loading
Use github (or your hosting) as a CDN, to serve images.


# => /initializers/emoji_picker.rb

Emoji.asset_host = 'https://raw.githubusercontent.com'
Emoji.asset_path = '/ID25/uriji_emoji_picker/master/lib/generators/uriji_emoji_picker/emoji/'

That's all! :smiley_cat:


Bug reports and pull requests are welcome on GitHub at https://github.com/uriji/uriji-emoji-picker.


The gem is available as open source under the terms of the MIT License.