How to add emoji support

(Updated: Nov. 20, 2017)

Whether you like emoji or not, this may be necessary for you to implement for your una community to avoid posts potentially being posted incomplete, or not posted at all when a member tries to post emoji from their phone or tablet. At least as of writing this, una strips out emoji, and at times that causes issues, especially within the timeline area. This was the easiest solution I could find. Even if emoji support is never added to the core of una, this would make a nice add-on app. I might research how to make apps for una and do that. But, for now, here's how you can add emoji support.

It's pretty easy despite all the text here. You'll only be uploading 1 file, and then including some code into the injection area of the Designer within the Studio.

  1. Download this JavaScript file: https://raw.githubusercontent.com/jadwigo/demoji.js/master/jquery.demoji.js
  2. Open it in your favorite text editor, and change what is in the parentheses on line 40 to this:  
    '.bx-tl-content, .bx-base-text-entity-content, .bx-base-text-unit-summary, .bx-def-font-middle'
  3. Upload this file in your Studio's Storage app and copy the url somewhere. You'll need this url in the next step.
  4. Paste the following into your site's head (or via the injection feature in the Designer app). The third line is where you want to put the url you copied from step 3. No changes are needed to the first and second line. These lines are emojione code hosted at jsdelivr.net.
    <script src="https://cdn.jsdelivr.net/npm/emojione@3.1.2/lib/js/emojione.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css">
    <script src="https://yoursite.com/s/sys_files/p8hfyvmzam87gecrl9ydfahlr87gerpy.js"></script>

    Enjoy your emoji. : )
  • View
    774
  • More
Replies (7)

    • You need to modify the following code:

      $('.hasemoji', 'body').each(function(e) {

      To something like this:

      $('.bx-base-text-entity-content', 'body').each(function(e) {

      To make it works in Posts, Discussions modules. For other modules different selector is required.

      Also js file can be uploaded into Studio > Storage, then you can insert this code into Studio > Designer > Injections > HEAD.

      • Thanks, Alex! I forgot about the ability to upload the JavaScript into Storage inside the Studio. That makes it easier. 

        • Well, I'm back to the drawing board. I think the JavaScript I was using conflicts with tinymce. Because it works for any form that uses a regular textarea. But, it won't work anywhere that uses the tinymce editor. 

          • I decided to start over and re-do these steps. This time I used the Storage app to upload the JavaScript. Now, the forms with tinymce textareas work again. It's odd, but, I feel like una likes it better when you use the Storage app. Because if I instead manually upload the JavaScript to a different folder on my server, things stop working right. Very, very, strange. 

            Maybe in the future full emoji support could be added. Or, strip out all emoji without breaking the post. The reason I decided to do this was because adding emoji to the timeline, caused the post to not show up, and triggered a couple PHP warnings.   

            • Actually UNA isn't breaking the post, it's done by this code:

              	$('body').each(function(e) {
		$(this).remoji();
	});

              This is the reason I've changed it in my previous post.

               

              • So that's why it's suddenly working again. I did end up changing that code. Thanks.

                But, my overall point still is that, without code like what I'm using above, una strips out emoji, and depending on where you're posting, causes errors. Because only part of the post's array goes into the database. Everything stops at where the emoji was stripped out. It seems to be mainly the timeline app that has the most trouble. This might need a ticket. 

                • I'm so excited! This is now 100% fully working. I'm going to update my original post with the correct code/steps.

                  Login or Join to comment.