kylefang/tsemple
1
0
Fork 0
mirror of https://github.com/zhigang1992/tsemple.git synced 2026-01-12 17:52:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add emoji to markdown_area

Browse Source 
[Issue #2]

Add emoji to topics and comments😄
This commit is contained in:
cbasic
2014-11-13 17:34:26 +08:00
parent 274407ec85
commit ae55555223
4 changed files with 55 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/javascripts/plugins/emoji.js
View File

@@ -1,37 +0,0 @@
$(function(){
var emojis = [
"smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee",
"a", "ab", "airplane", "alien", "ambulance", "angel", "anger", "angry",
"arrow_forward", "arrow_left", "arrow_lower_left", "arrow_lower_right",
"arrow_right", "arrow_up", "arrow_upper_left", "arrow_upper_right",
"art", "astonished", "atm", "b", "baby", "baby_chick", "baby_symbol",
"balloon", "bamboo", "bank", "barber", "baseball", "basketball", "bath",
"bear", "beer", "beers", "beginner", "bell", "bento", "bike", "bikini",
"bird", "birthday", "black_square", "blue_car", "blue_heart", "blush",
"boar", "boat", "bomb", "book", "boot", "bouquet", "bow", "bowtie",
"boy", "bread", "briefcase", "broken_heart", "bug", "bulb",
"person_with_blond_hair", "phone", "pig", "pill", "pisces", "plus1",
"point_down", "point_left", "point_right", "point_up", "point_up_2",
"police_car", "poop", "post_office", "postbox", "pray", "princess",
"punch", "purple_heart", "question", "rabbit", "racehorse", "radio",
"up", "us", "v", "vhs", "vibration_mode", "virgo", "vs", "walking",
"warning", "watermelon", "wave", "wc", "wedding", "whale", "wheelchair",
"white_square", "wind_chime", "wink", "wink2", "wolf", "woman",
"womans_hat", "womens", "x", "yellow_heart", "zap", "zzz", "+1",
"-1"
]
var emojis = $.map(emojis, function(value, i) {return {key: value, name:value}});
var emoji_config = {
at: ":",
data: emojis,
tpl:"<li data-value=':${key}:'>${name} <img src='https://assets-cdn.github.com/images/icons/emoji/${key}.png' height='20' width='20' /></li>",
insert_tpl: "<img src='http://a248.e.akamai.net/assets.github.com/images/icons/emoji/${name}.png' height='20' width='20' />",
delay: 400
}
$inputor = $('#inputor').atwho(emoji_config);
$inputor.caret('pos', 47);
$inputor.focus().atwho('run');
});

41
app/assets/javascripts/plugins/emoji.js.coffee Normal file
View File

@@ -0,0 +1,41 @@
campo.Emoji =
run: (ele) ->
emojis = [
"smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee",
"a", "ab", "airplane", "alien", "ambulance", "angel", "anger", "angry",
"arrow_forward", "arrow_left", "arrow_lower_left", "arrow_lower_right",
"arrow_right", "arrow_up", "arrow_upper_left", "arrow_upper_right",
"art", "astonished", "atm", "b", "baby", "baby_chick", "baby_symbol",
"balloon", "bamboo", "bank", "barber", "baseball", "basketball", "bath",
"bear", "beer", "beers", "beginner", "bell", "bento", "bike", "bikini",
"bird", "birthday", "black_square", "blue_car", "blue_heart", "blush",
"boar", "boat", "bomb", "book", "boot", "bouquet", "bow", "bowtie",
"boy", "bread", "briefcase", "broken_heart", "bug", "bulb",
"person_with_blond_hair", "phone", "pig", "pill", "pisces", "plus1",
"point_down", "point_left", "point_right", "point_up", "point_up_2",
"police_car", "poop", "post_office", "postbox", "pray", "princess",
"punch", "purple_heart", "question", "rabbit", "racehorse", "radio",
"up", "us", "v", "vhs", "vibration_mode", "virgo", "vs", "walking",
"warning", "watermelon", "wave", "wc", "wedding", "whale", "wheelchair",
"white_square", "wind_chime", "wink", "wink2", "wolf", "woman",
"womans_hat", "womens", "x", "yellow_heart", "zap", "zzz", "+1",
"-1"
]
emojis = $.map emojis, (value, i) ->
{
key: value,
name: value
}
emoji_config =
at: ':',
data: emojis,
tpl:"<li data-value=':${key}:'>${name} <img src='https://assets-cdn.github.com/images/icons/emoji/${key}.png' height='20' width='20' /></li>",
insert_tpl: "<img src='http://a248.e.akamai.net/assets.github.com/images/icons/emoji/${name}.png' height='20' width='20' />",
delay: 400
$(ele).atwho(emoji_config)
$(document).on 'page:update', ->
campo.Emoji.run('#js_emoji_input')

15
app/helpers/markdown_helper.rb
View File

@@ -35,6 +35,17 @@ module MarkdownHelper
end
end
def emojify(content)
content.to_str.gsub(/:([\w+-]+):/) do |match|
if emoji = Emoji.find_by_alias($1)
%(<img alt="#$1" src="http://www.emoji-cheat-sheet.com/graphics/emojis/#$1.png" style="vertical-align:middle" width="20" height="20" />)
else
match
end
end.html_safe if content.present?
end
def markdown_text_replace(html)
doc = Nokogiri::HTML.fragment(html)
doc.accept(TextReplaceVisitor.new)
@@ -55,9 +66,9 @@ module MarkdownHelper
end
def markdown_format(text)
sanitize(markdown_text_replace(markdown(text)),
sanitize(markdown_text_replace(emojify(markdown(text))),
tags: %w(p br img h1 h2 h3 h4 blockquote pre code strong em a ul ol li span),
attributes: %w(href src class title alt target rel))
attributes: %w(href src class title alt target rel height width))
end
def markdown_area(form, name, options = {})

2
app/views/markdown/_area.html.slim
View File

@@ -14,7 +14,7 @@
= t '.preview'
.tab-content
.tab-pane.active id=write_pane_id
= form.text_area name, class: 'form-control', data: { behaviors: 'autosize' }, tabIndex: tabIndex
= form.text_area name, id: 'js_emoji_input', class: 'form-control', data: { behaviors: 'autosize' }, tabIndex: tabIndex
.file-upload
= file_field_tag :file, multiple: true, tabIndex: 99
.text.text-muted