mervick / emojionearea Goto Github PK
View Code? Open in Web Editor NEWEmoji Picker Plugin for jQuery
Home Page: https://jsfiddle.net/mervick/1v03Lqnu/765/
License: MIT License
Emoji Picker Plugin for jQuery
Home Page: https://jsfiddle.net/mervick/1v03Lqnu/765/
License: MIT License
The default emojione supports for ASCII emojies like :) :(
etc.
Can the emojionearea provide the same support?
I'd like a way to programmatically set the carat/cursor position in the content editable field.
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;
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.
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
Is the emoji editor a fixed size [height]?
I added ROWS to TEXTAREA, and the emoji editor doesnt resize accordingly [in height].
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?
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 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
}
},
}
});
});
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?
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.
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());
}
}
Is there a way to get the plugin to refresh and get the new value of the textarea ?
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
}
}
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!
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:")
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!
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?
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
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 :)
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.
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.
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.
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.
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,
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!
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...
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.
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.
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
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");
....
}
}
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.
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?
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
Any recommendations on how to test in Jasmine?
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);
});
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!
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! :)
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
Hello, I want to clear emojionearea textarea. How can i do it? Thankyou!
icon not included. sprite css also.. i prefer not to link to cdn everytime.
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 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!
Hi,
after submit form, how to empty textarea?
Thanks
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?
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...
So it's only the previous data that I'm able to use. Any ideas on a suitable way around this? Thanks!
Daniel
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.