I would like to add a space after each smilie

[AndyB]

When I add a smilie, I would like to have a space automatically be added. That way if two or more smiles are inserted one after the other, a space will separate them.

Could someone please tell me which php or js file to hack.

Thank you.

 

[Chris D]

Probably just changing this with CSS is more elegant (and proper):

Before:

After:

 

[AndyB]

Hi Chris,

Thank you for your suggestion. Unfortunately I don't use the default smilies which use sprites. I use my own which do not use sprites. Also I would prefer adding a space for readability reasons (when not viewed in WYSIWYG).

Hopefully someone will know which php or js file needs to be edited, it should be a very simple hack once the right part of the code is located.

 

[Chris D]

Hi Chris,

Thank you for your suggestion. Unfortunately I don't use the default smilies which use sprites. I use my own which do not use sprites. Also I would prefer adding a space for readability reasons (when not viewed in WYSIWYG).

Hopefully someone will know which php or js file needs to be edited, it should be a very simple hack once the right part of the code is located.

This can still be done with CSS...

I missed that the CSS only applied to sprites. This will apply to standard non-sprite smilies too:

img.mceSmilie,
img.mceSmilieSprite
{
	margin-right: 15px;
}

 

[AndyB]

Hi Chris,

Thanks again for the follow up. However it doesn't seam to work. I added your CSS to the EXTRA.css template, reloaded my thread and tried it.

However, I really would like to just add a space after each smilie code. I've been doing it that way for 11 years on my forum and my members and I are used to having the space inserted automatically after each smilie.

 

[Chris D]

Ok. I just wrote this add-on:

http://xenforo.com/community/resources/space-after-smilie.1558/

It adds a space after each smilie.

I remember you saying that you don't like installing add-ons...

If that's the case (though having an add-on to do it is much better than doing code edits which will be lost during upgrade) then check out my download and look in the library/SpaceAfterSmilie/BbCode/Formatter/Base.php file.

This file overwrites two variables which are in the core file library/XenForo/BbCode/Formatter/Base.php file.

You should be able to spot the differences and make the changes necessary to the core file if that's what you prefer.

 

[AndyB]

Chris, you're the best. Downloading your code now and will report back.

I'm not adverse to add-ons, just that hacking the code is sometime much easier. I always like to take the easiest and simplest path to forum modifications.

 

[AndyB]

Hi Chris,

First I just edited the php code directly. When I searched the xenforo folder I found the following two files with the code we need to edit:

library/Xenforo/BbCode/Formatter/Base.php
library/Xenforo/BbCode/Formatter/Wysiwyg.php

I added the &nbsp and it actually inserted $nbsp instead of a space, so I replaced with a space.

Unfortunately I could not make it work correctly. I insert two smilies it does not put a space in. However if I click the bbcode editor link and back to the rich editor it inserts the space.

I next tried your add-on but it doesn't work at all to insert a space.

Looks like you're on the right track. Wouldn't this be a js edit? That's how I did it in vB4.

Thank you kindly.

 

[Chris D]

I added the &nbsp and it actually inserted $nbsp instead of a space, so I replaced with a space.

It should be  

The add-on should work, I've tested it on two installs now.

And no, it's nothing to do with Javascript AFAIK.

 

[AndyB]

Your add-on does work (thank you). However it only works if I put the cursor before some text or before another smilie.

What I would like to be able to do is to click into the editor window (this would be an empty editor) and insert three smilies one after the other. If you try that I think you will see how the space is not added after each smilie code. Also looking at the post table with phpmyadmin you can also see there are no spaces added when the smilies when added this way.

I suspect there is some trimming going on to remove any extra spaces if a tag is at the end of the document.

Thanks again, Chris. I really appreciate you help with this.

 

[AndyB]

I just noticed on this forum, if I insert a smilie and hit the backspace key once, then insert another smilie a space is put between the two smilies.

 

[AndyB]

I just noticed another interesting behavior. On this forum if I insert a smilie (try it on an editor without any text), I can press the right-arrow key on my keyboard because an extra space is already inserted by default. Looks like the problem is the cursor is not moving to the right after a smilie is inserted.

 

[Chris D]

I just noticed another interesting behavior. On this forum if I insert a smilie (try it on an editor without any text), I can press the right-arrow key on my keyboard because an extra space is already inserted by default. Looks like the problem is the cursor is not moving to the right after a smilie is inserted.

Yeah it seems there's some odd behaviour with the editor.

I found some javascript earlier (obviously the smiley inserter is to do with JS, I didn't realise that's what we were talking about originally) and I added the   to the code and I noticed the same behaviour. It adds the space, but the cursor doesn't jump after it. So unfortunately it might have to be one of those things that just isn't perfect. Although the space isn't displayed in the editor itself, with my add-on it does insert the space automatically when you post.

 

[AndyB]

Thank you for your time and confirmation, Chris.

It would be nice if the cursor would point to the correct position after a smilie is inserted. It just looks better when you have a space separating each smilie.

I'll continue to search for a solution.

 

[AndyB]

Looks like the simplest thing for me to do at this time is make the following hack. This put the space after the smilie is inserted (unfortunately not seen in WYSIWYG mode), but the space is saved properly in the xf_post table message field.

Edit the following:

/js/tinymce/plugins/themes/xenforo/editor_template.js

put a   where the arrow is pointing.