Hi,
I'm using the latest version of Emojionearea and think its fantastic. How can i use this to display a comment without it being editable (or showing the emoji bar) but on the click of an edit button, enable emojione area for the comment?
Thanks!

It appears that there is one character short of the text in content editable component when getText() is invoked.

I simply attached the events config below into the fiddle at https://jsfiddle.net/glui2001/ukLaz8cm/

events: {
         keypress: function (editor, event) {
           console.log(editor.html());
           console.log(this.getText());
         }
}

Hi,
First of all, congratulations for this awesome plugin, keep up good work.
I would like to integrate this example: http://git.emojione.com/demos/2.1.2/autocomplete.html
but doesn't work..
I would like to allow users to use also autocomplete.
I hope that you can show an example.
Autocomplete is great, but most important is to autoconvert shortcodes ( for example ❤️ ) to correct images. At the moment if you add icon via mobile, this seem not converted.
Thanks!

Hi! I've been trying to submit a form when the user press enter while on the emojionearea field.

I've already tried this, but the enter key is never catched: https://jsfiddle.net/2s9dhks8/.

I there any "official" way to do it? Thank you.

Would it be possible for you to prevent the keyboard (on mobile devices) from opening up while clicking among the emojis? Perhaps an option? Would really appreciate it!

Hello Andrey,

nice work can you help me?
I need submit a feature to the content with the return key.
This can make an impression here is a demo:
http: // demo.like-friends.de

I would like to include in the comments, they will be sent with return.

Thanks for help
Regards, Frank

Hi,

Great job on the component. I really like what you did allowing some much flexibility and configurability.

That being said I wondered if there was a way to get a handle on an instance of the emojionearea object?

For example, can it return a handle to something that I can call methods on? I can call these methods in the event handlers, but I want to access these methods outside of that

var handle = $('.selector).emojioneArea();
handle.setText();

Hi,
after submit form, how to empty textarea?
Thanks

i cant set the version to 2.1.1
Also on the Jsfiddle it wil not work.

This jsfiddle : https://jsfiddle.net/1v03Lqnu/47/
What i what to achief is : http://mervick.github.io/emojionearea/
Thanks

I think this was introduced somewhere between v3.0.4 and v3.1.4 test case here: https://jsfiddle.net/mjwxefqd/

If you check the network requests there's 1600+ request for pngs which seems to be delaying page loading process somewhat, Does the option for a sprite sheet still exist or is there a way to delay this load until it's needed?

The default emojione supports for ASCII emojies like :) :( etc.

Can the emojionearea provide the same support?

How to switch to SVG from PNG icons ?
I tried :
emojione.imageType = 'svg'; emojione.sprites = true; emojione.imagePathSVGSprites = './../assets/sprites/emojione.sprites.svg';

but it not work

Hi!

First and foremost I want to thank you for this great emoji picker plugin. You're doing a great job!

I'm having trouble with emojis being presented the wrong way when published. In the editor they look fine but when I publish the message there is another emoji (the old lady) behind each and every emoji.

hi,
I use autoHideFilters and I would like that on focus textarea the filters and tabs is closed.
I suppose to use event on focus, but not sure how to hide them.

            events: {

                focus: function (editor, event) {
                  // Hide filters and tabs
                }
            }

Hello.

I want to get HTML content wen i submit my form for example :

var emojiElt = $("#com_texte").emojioneArea({autocomplete: false});

$('#commentForm').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
        type        : "POST",
        url         : $(this).attr("action"),
        data        : $(this).serialize(),
        beforeSend  : function () {
            $("#com_texte").val(emojiElt.getHtml()); // <-- HERE
        },
        dataType    : 'json'
    }).done(function (jsonResponse) {

        // Success code

    }).always(function () {
        // Reset myForm
        document.getElementById("commentForm").reset();

        // Reset Emoji field
        emojiElt.reset(); // <-- HERE


    }).fail(function () {
        alert("Une erreur s'est produite. Le commentaire n'est malheureusement pas pris en compte.");
    });

});

In the beforeSend i want to get HTML from the editor.

I found this way to get the HTML but it don't seems to be the best solution :

var emojiElt = $("#com_texte").emojioneArea({
    autocomplete: false,
    events: {
        keyup: function (editor, event) {
            $("#com_texte").val(editor.html());
        }
    }
});

And after success i want to reset the field.

Thank's for yout help :)

Any recommendations on how to test in Jasmine?

Hi,
Thanks for this wanderful time saver!

I have a problem with the shortname option in "emojionearea": "^3.0.0",

This is my code:

$(this.$els.responder).emojioneArea({ <-- the textarea replaced, has value with unicode and not shortnames...
            pickerPosition: "top",
            filtersPosition: "bottom",
            tones: false,
            autocomplete: true,
            shortnames: true,
            events: {
                keyup: function (editor, event) { 
                    console.log (this.getText()) <--- this is printing with unicode.
                  //hide the picker/selector if you click on the textarea
                  // $(".emojionearea-picker").addClass("hidden");
                  // $(".emojionearea-button").removeClass("active");
                  if (event.keyCode === 13) {
                    if (self.messageToSend.length) {
                        // self.messageToSend = emojione.toShort(text);
                        var sts = self.sendMessage();
                    }
                    if (sts) this.setText('');
                  }
                },
                paste: function (editor, event) {
                    console.log('event:paste');
                    var text = (event.originalEvent || event).clipboardData.getData('text/plain') || prompt('Paste something..');
                    window.document.execCommand('insertText', false, text);
                }
           }
        });

Thank you!

The plugin is working great when attached to textbox.
However when I try to show the previous saved content in a paragraph, not all icons are showing.

Do you know what's the issue?

Is there a way to get the plugin to refresh and get the new value of the textarea ?

Hi,

I'm having a problem getting real-time data from the "editor" parameter. For example, here's an outline of my code...

$("#commentsTextArea").emojioneArea({
  tones: false,
  autocomplete: false,
  hidePickerOnBlur: true
  ,   events: {
          mousedown: function (editor, event) { 
            //hide the picker/selector if you click on the textarea
            $(".emojionearea-picker").addClass("hidden");
            $(".emojionearea-button").removeClass("active");
          }, 
          keydown: function (editor, event) {
              console.log("reviewing text: " + editor.text());                                  
              //do some stuff with editor.text()
          }
      }

});

Every time I press a key on my emojionearea it correctly fires a keydown event. But the parameter "editor" is always one cycle out of synch - for example, the console.log statement above works like this...

1. I type "h" in emojionearea and it prints "reviewing text: "
2. I type "e" in emojionearea and it prints "reviewing text: h"
3. I type "l" in emojionearea and it prints "reviewing text: he"
4. I type "l" in emojionearea and it prints "reviewing text: hel"
5. I type "o" in emojionearea and it prints "reviewing text: hell"
6. I type backspace in emojionearea and it prints "reviewing text: hello"

So it's only the previous data that I'm able to use. Any ideas on a suitable way around this? Thanks!

Daniel

I use emojionearea in an angular2 project, and my textarea has an (keyup) event. But when I bind the emojionearea to the textarea, the event could not be called. I do not know how to solve this problem.

My textarea element likes this:
<textarea id="emoji-dialog" class="form-control" rows="5" [(ngModel)]="textContent" (keyup)="myKeyup(p)" (keydown)="myKeyup(p)" (change)="myKeyup(p)" #p></textarea>

And, the myKeyup() function likes this:
myKeyup(p){ this.numerator = this.textContent.length; if(this.textContent.length>this.denominator){ this.textContent = this.textContent.substring(0,300); this.numerator = this.textContent.length; }else{ this.flag = 0; } }

Looking forward to your response, thanks !

I can not type any letters after single emoji in the area if emoji is a last symbol in the text.

confirmed here: https://jsfiddle.net/1v03Lqnu/12/
i try to type in the firest textarea with "Default 😄" - i CAN type in the middle of the string, but can not type AFTER emoji.
screen with details: http://joxi.ru/Q2KnMRes9nnQJm
if i add one more emoji - i can type again :) http://joxi.ru/zAN0lnehlQQn3m
even if i add emoji somewhere else - still can type: http://joxi.ru/BA0dDL6SBGGYLA

Hi!

I want to know, how can i use an sprite instead of individual png files.

I already tried to use
"useSprite : true"
and
"emojione.sprites : true"

but seems not working.

Yes... i already included the emojione.sprites.css file in my project .. not working;

Hello, I want to clear emojionearea textarea. How can i do it? Thankyou!

Hi!

I'm having some problems with my node.js app.
I'm using Socket.io and Express along with other plugins. Every time I load the page where the input I want to transform is I get this error:
Uncaught TypeError: Cannot read property 'indexOf' of undefined emojione.js:367
And looking into the trace there are a lot of calls to emojionearea.js

Any ideas?

Thank you! :)

Is there an easy way to add compatibility with the editors? I have already editors like jHtmlArea and TinyMCE , i just need the Icons Picker and the autocomplete functions. Do you know how can i achieve this?

Is the emoji editor a fixed size [height]?
I added ROWS to TEXTAREA, and the emoji editor doesnt resize accordingly [in height].

The homepage docs and the demo HTML use useSprite: false in the options, but this does not work you need to use sprite: false as shown in the actual lib code.

How to make the most fast download for images?
I hoped to use SVG-sprites with gzip-compression, but seems like it's not possible any more...

I don't have a particular Use Case for this, but sometimes when my application starts something goes wrong with the editor. Typing and adding of emojis works, but pasting is not working at all. Even a rightclick on the contenteditable is not showing me the copy/cut menu options. Is it a contenteditable problem or a emojionearea problem? Any ideas?

Again, a "sometimes" issue i have faced with the tool. Sometimes when a Emoji is added via the selection menu, it is getting added before the contenteditable inside of the container which is created by the tool. I don't know if there is something going wrong inside of the tool and appends the emoji to the wrong container.

This causes an error on browsers that don't support local storage...

define([], function() {
   return function () {
        return localStorage.getItem("recent_emojis") || "";
    }
});

I think the following should work but haven't had time to test

define([], function() {
   return function () {
        return (window.localStorage) ? localStorage.getItem("recent_emojis") : "";
    }
});

Can make a PR later if you want?

How about doing emojioneVersion configurable on init?

Currently it's hardcoded in emojionearea/js/emojionearea.js@56:

var emojioneVersion = '1.5.2';

I downgraded from 2.0.1 to 1.5.2 in order to have a consistent look between all the icons, but it would be cool to use any emojione version, even if, at the moment, the newer icons on the sprite are still not supported.

I have no problem using emojionearea to create emoji inputs on textareas like this...

$("#commentsTextArea").emojioneArea({
tones: false,
autocomplete: false,
hidePickerOnBlur: true
});

But then when I take this input and save the comment to the database and display the result in a normal text element on the page, of course it's up to the browser to try and find a suitable emoji (sometimes they find one but it always looks different).

So I need a way to apply emojionearea to my display-only elements without adding the option to choose new emojis. Hopefully that makes sense but so far I've found no parameters that would enable me to "display as emojionearea" without adding the picker/selector.

Thanks in advance for any hints!

I am looking for it to output emoji codes 😄 (:shortcut:) I thought that might have been the short names option but when I set that to true, it still outputs unicode.

How i can get textarea updated every time i pressed to key, after event keyup.
I using it with angularjs and need to update model every time.

i tried to fix this in source and it works, but how i can do it correctly:

if (options.shortcuts) {
            self.on("@keydown", function(_, e) {
                    //Here i trigger it every time
                    trigger(self, 'change', [editor]);
                    source.trigger("change");
                   ....
            }
}

icon not included. sprite css also.. i prefer not to link to cdn everytime.

I cant submit a form when pressing enter in textarea. It only works when I click to somewhere, then click to the textarea and press enter.
My form

<form id="add-msg-form">
        <div class="panel-footer">
            <div class="input-group" style="display: -webkit-box" id="txtbox">
                <textarea id="txtMessage" placeholder="Vui lòng nhập nội dung tin nhắn" ></textarea>
                <span class="input-group-btn">
                    <button class="btn btn-info" id="btnSend" type="submit">Send</button>
                </span>
           </div>
    </div>
</form>

$(document).ready(function() {
    $("#txtMessage").emojioneArea({
        events: {
            keypress: function (editor, event) {
                if(event.which == 13){
                    console.log('event:keypress'); //work
                        $('#add-msg-form').submit(); //not work
                                        $('#txtMessage').val(''); //not work
                                }
            },
        }
    });
});

Hi,

When pasting into editor area, Unicode character 'INVISIBLE SEPARATOR' is prefixed to the string and shows as a dotted square:

Offending character is: http://www.fileformat.info/info/unicode/char/2063/index.htm

Tested on IE11, Microsoft Edge.

I have a use case where I'd like to preset the editable content text with a value that contains embedded HTML.

For example, I'd like to call myHandle.setText('<br> -signature');, but have the HTML interpreted as such instead of displayed verbatim.

Hi,
When I click the submit button, if emojionearea is open then first of all occur event to close emoji, and submit form is not executed. I need to click one second time on submit button.
There is a way to prevent this?
Thanks

This returns " ":

       emojioneArea[0].emojioneArea.on('keyup paste emojibtn.click change',
                function () {
                    console.log(emojioneArea[0].emojioneArea.getText());
                });

This returns " text":

  emojioneArea[0].emojioneArea.on('keyup paste emojibtn.click change',
                function () {
                    setTimeout(function() {
                        scope.$apply(function () {
                            console.log(emojioneArea[0].emojioneArea.getText());
                        });
                    }, 300);
                });

1. Why is there an delay?
2. Why is there a space?

Hey, thanks for a great plugin, I have a small feature request!

When initialising the plugin, it would be useful if the existing text was parsed and converted to emoji images.

<textarea>My existing text :smile:</textarea>

In a similar manner, it would also be useful if the setText method parsed input for emojis too.

.setText("My updated text :smile:")

Generated text area doesn't copy data attributes from original input which in some cases are necessary.

For example: I'm using the data attribute to know to which user the message should arrive. Since the text area doesn't contains it the ajax call throws an error.

Will there be an option to disable ?
if (!emojione || getSupportMode(detectVersion()) < 2) { $.getScript(cdn_base + emojioneVersion + "/lib/js/emojione.min.js", function () { emojione = window.emojione; emojioneVersion = detectVersion(); emojioneSupportMode = getSupportMode(emojioneVersion); cdn_base += emojioneVersion + "/assets"; var sprite = cdn_base +"/sprites/emojione.sprites.css"; if (document.createStyleSheet) { document.createStyleSheet(sprite); } else { $('<link/>', {rel: 'stylesheet', href: sprite}).appendTo('head'); } while (readyCallbacks.length) { readyCallbacks.shift().call(); } }); } else { emojioneVersion = detectVersion(); emojioneSupportMode = getSupportMode(emojioneVersion); cdn_base += emojioneVersion + "/assets"; }
and add path to their own?

Hello,

It's an awesome work. But I have an issue that need to be fixed fast.
Whatever I try to submit and save the text in textarea using emojionearea to database, it doesn't save properly in HTML and it cause the emoji become '?????????' question marks in database. Also other HTML tags like bold tag and other else also doesn't work.

For note, I use laravel PHP for my development. Do you have any solution? Thanks in advance.

I'd like a way to programmatically set the carat/cursor position in the content editable field.

is there an api to do this? for example:

now the content of textarea is : 👍 hello
then i want to insert this: to the textarea
after that the content is: 👍 hello [image] to the textarea

the [image] is a real image.

thanks for your good job.