Add this line to your application's Gemfile:
gem 'rails_emoji_picker'
Run command
rails g rails_emoji_picker:install
It copies emoji images to your /assets/images
directory
application.js
//= require jquery
//= require rails_emoji_picker
//= require_tree .
application.css
/*
*= require_tree .
*= require rails_emoji_picker
*= require bootstrap
*= require_self
*/
application.scss or sass
@import 'rails_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 } %>
</p>
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 %>
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'}
Example:
# => /initializers/emoji_picker.rb
Emoji.asset_host = 'https://raw.githubusercontent.com'
Emoji.asset_path = '/ID25/rails_emoji_picker/master/lib/generators/rails_emoji_picker/emoji/'
That's all! :smiley_cat:
Bug reports and pull requests are welcome on GitHub at https://github.com/ID25/rails_emoji_picker.
The gem is available as open source under the terms of the MIT License.