jmadler / emoji-picker Goto Github PK

How do you keep the single input fields to stay on one line? It seems that you can break return and have multiline even though it's a single line input field. Makes sense for textareas, but should not happen for single line input fields.

Can I use emoji-picker also for IPad?
Because emoji icon and div were not generated.

Maybe I'm a noob but I don't understand why you chose to render the emojis in the picker via an image rather than rendering as unicode. Browsers support rendering emojis as unicode. Unless you want to force a specific emoji image set (eg. google, twitter, or apple) requiring the user to download a spritesheet seems to me like a waste of bandwidth. Am I misunderstanding something with how emojis work?

while retriving emojis from database it shows black & white emojis in list. how can i print colored emojis in list?

Hi there,

Unicode 9.0 was released on June 21, 2016. Please see: http://emojipedia.org/unicode-9.0/

Can we expect more icons/emojis to be added to js lib, css and sprites soon?

Thanks!

Eric

If we apply this to TextArea element the height of resultant DIV is not adjusted as per the TextArea rows. To achieve this I added the following line of code..

jquery.emojipicker.js

--look for this block --

if ($textarea.attr('maxlength')) {
      this.$editor.attr('maxlength', $textarea.attr('maxlength'));
    }

    var unicodeToImageText = this.emojiPopup.unicodeToImage($textarea.val());
        this.$editor.html(unicodeToImageText);
        this.$editor.attr({
            'data-id': id,
            'data-type': 'input',
            'placeholder': $textarea.attr('placeholder'),
            'contenteditable': 'true',
        });

--REPLACE with this block---

if ($textarea.attr('maxlength')) {
      this.$editor.attr('maxlength', $textarea.attr('maxlength'));
    }

        this.$editor.height($textarea.outerHeight()); //auto adjust height

    var unicodeToImageText = this.emojiPopup.unicodeToImage($textarea.val());
        this.$editor.html(unicodeToImageText);
        this.$editor.attr({
            'data-id': id,
            'data-type': 'input',
            'placeholder': $textarea.attr('placeholder'),
            'contenteditable': 'true',
        });

I want to use my own div for input and not use the one generated by the emojiable = true!

First thank you for this nice work. I know it is a lot of effort.
So I did all steps you showed and its not appearing on iphones. It works on PC and Android though. Here are some minor bugs. On small screens the emoji drawer could be out of the screen. On android it sometimes flies to the left.

I try to use this emoji-picker on my web application, it works well exception this issue:
Text and pictures have overlap when enable emoji-picker in textarea, it works well under Safari but met problem on Chrome(on Mac).

Safari

Chrome

Hey,
While typing anything in textbox,two blanks divs are being generated automatically inside "emoji-wysiwyg-editor" div. Even after $('.emoji-wysiwyg-editor').empty(); those blanks div are present.

Anyone is also facing same issue?

Help Me.. i am using this one signal/emojipicker in my php (laravel) project.
but when i copy that msg containing emoji that time it give shortname but i want unicode emoji character rather than short name...

Looks like it's taking over my input box correctly, however, the actual emoji picker icon isn't showing. I have font-awesome correctly inserted into my tag.

Here is what the tag looks like
<i class="emoji-picker-icon emoji-picker undefined" data-id="b7aa839f-a6fa-4354-8a33-cfcadf8cba1a" data-type="picker"></i>

hello!haw can i display like emoji icons value (f.e. smile) from inputs?
i try to $('#inputId').emojiarea({wysiwyg: true}); but i have an arror
Cannot read property 'unicodeToImage' of undefined

It can not set the originalText value.

I'm using sockets to send messages. On form submit I clear the text area. How do I update the emoji div?

I also change the placeholder text depending on certain selections in the form I'd like to force update that for the content.

Hi! I've tried to use your plugin on my website. But on the same form that I wanna to use emoji, it has also a field with ckeditor set and the field that I want to use now get the settings with ckeditor enabled from the other field. How to avoid this conflict?

Thanks

Rogério

Anyone else having this problem? See code below. I'd expect that when you type text into the input and press the enter key it should trigger the ng-click event. It does so when when I remove the data-emojiable="true" from the input field...

<form name="chatMessage"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button" ngf-select="vm.upload($file)">+</button> </span> <input type="text" class="form-control" ng-model="vm.chatMessage" data-emojiable="true"> <span class="input-group-btn"> <button id="send-message-button" type="submit" class="btn btn-default" ng-click="vm.sendChatMessage()">Send </button> </span> </div> </form>

I created a column collation utf8mb4_unicode_ci, but it just save as ?????????

The whole design of the input is changed, e.g. its now on top insteat on bottom. You know why?
So i'm opening a new window and in that input it doesnt work, i think he doesnt get the classes. But in the ones on the other window is work

can fix ?

How to preload an emoji in the input by default ,on loading.

Can we please add package.json to this project and version tags so cdnjs can host it.

#2
#3

While retrieving the emojis from the local database, we get unicode of that particular emoji.How to convert that unicode back to emoji.

Can you help with this ?
http://one-signal.github.io/emoji-picker/ - you can open at iphone, and you will see only simple inputs

On copying text from a MS Word document to an emoji-picker field, some spaces get removed leading to concatenated words. This happens on the demo page as well. For example:
"This term X was coined in 1920 by the 9 year old nephew of American mathematician Edward Kasner."
became: "This term X was coinedin 1920 by the 9 year old nephew of American mathematician Edward Kasner."
It looks like the library is taking text and adding \n newline characters at certain places and then later doing a string join on newline while eliminating the spaces in between words.

I was able to handle this by doing a one-line change.

Hi,
I was implementing this plugin in my project and I noticed that when I select ': point - right' or ':muscle' emoji (or any emoji containing hand i.e; punch ,finger etc) the skintone changes in my div..any fix for this.

PS: this is happening when you put data-emoji-input="unicode" not in case of img (which is obvious)

Hi,
Is there any chance that I can your plugin with emojione:
https://github.com/Ranks/emojione

missing ❤️ Unicode emoji

would you please consider adding package.json so that we can add your lib on https://cdnjs.com.
thank you very much!
cdnjs/cdnjs#5570

This is kind of along the line of #5, I want to grab the unicode value of whatever emoji I'm using. I'm submitting form via ajax and updating the view with that content and need to get the actual emoji instead of just the black/white sketch img. Thanks!

Hi, is there a way to limit the available emojis in the picker?

would you please consider adding tags for each version so that we can add your lib on https://cdnjs.com/ with git auto-update.
thank you very much!
cdnjs/cdnjs#5570

Even if you open demo page it doesn't work.

After using data-emoji-input="unicode" data-emojiable="true" all keyup binding data stop to working. Just working with change event.

It should be noticed that demo site has 404 error.

Good afternoon. Why can not appear in the button EMOJI textarea ( though in the code page it works ) ? All files are where they should.
Code:

Is there a way to open the popup of emojis in another position, look at my image I am not able to see the emojis when the popup is opened near the bottom of the page.

Hello,

It is possible?

Hi, there is a jquery error in the sample page and one time in my project.
Error: Permission denied to access property "nodeType"
But i am not sure where its comes from.

Hi

I am using emoji-picker in my app. when we click on any emoji.
it render following html in text area.

<img src="/assets/emoji//blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('/assets/emoji//emoji_spritesheet_0.png') -75px 0px no-repeat;background-size:675px 175px;" alt=":blush:">

when i submit the form i want to receive values as ": blush :" rather than "symbol "

is thr any way to do that?

Thanks

I have one emoji-popup, what can I do to replace it by emoji-picker?)

Can you create a master branch so this is installable via bower? The error I get when trying to install is:

bower not-cached https://github.com/OneSignal/emoji-picker.git#*
bower resolve https://github.com/OneSignal/emoji-picker.git#*
bower ENORESTARGET Tag/branch master does not exist

Additional error details:
Available tags: 1.0
Available branches: gh-pages

For small screen, only 1st column is visible.
In demo page horizontal scroll appear in body to show other rows. But for responsive site, horizontal scroll is disabled so we can't visible other columns.

Can you please look at this issue?

Regards,
Arpan

I am saving unicode of emoji in db. It worked but when I retrieve, it did not work as expected. I can decode from unicode to emoji, it showed normal black and white emojis. I need the emoji image from spritesheet. Any help ?

1. Before scroll
   .emoji-menu
   transform: translateX(993px) translateY(194px) translateZ(0px);
2. After scroll
   transform: translateX(880px) translateY(194px) translateZ(0px);

Expect

this.tether = new Tether({
element: '[data-id="' + this.id + '"][data-type="menu"]',
target: '[data-id="' + this.id + '"][data-type="picker"]',
attachment: 'bottom center',
targetAttachment: 'top center',
offset: '230px 110px', --------> could change offset and make sense
constraints: [
{
to: 'html',
pin: true
}
]
});