I'm using contenteditable to allow users to post on my message board and send Private Messages. So it's "rich HTML" instead of using BB tags like this site.
I offer a bunch of built-in emojis, but they don't work on mobile devices (or they
didn't; I haven't checked lately). People on mobile can open their own emojis on their keyboard, though, and with contenteditable it looks like they plug in and work, but... they don't, really.
For testing, I sent a message from my Android to a friend on iPhone. They opened it with Chrome for iPhone, and my emojis showed up just fine. Then they replied to me, and I opened their message using the default Android browser and then Chrome for Android, and both showed their iPhone emojis.
Then I opened them in Firefox, and the emojis worked fine there, too.
But then I opened their message using Chrome for desktop, and instead of the regular emojis I got some sort of ASCII-type of emoji, not the images sent.
Then I tried it using IE, and I just got a bunch of square blocks.
In the database, they show up like:
😊😜ðŸ˜ðŸ˜ŽðŸ™„
(those are 5 different emojis)
Can you guys suggest a way that I can successfully embed these for all browsers? Maybe a font to import, or a package of images to download and manually convert each symbol to an
<img src='...'>?