The Happy Place - Clickable Smilies Under Editor Control

[Peggy]

ok great, thanks again.

 

[ArnyVee]

Thanks to Anthony for providing the instructions for removing the smilie dropdown here: http://xenforo.com/community/thread...-under-editor-control.8229/page-2#post-114686

 

[Jethro]

Now what else can I think of that Anthony will do for us Great minds Anthony, actually one of our members wanted that one.

 

[Kim]

Yep... simple as that, and the dropdown is gone, just leaving the clickable smilie box.

You will have to remember to change that file on further upgrades, otherwise the package will overwrite it.

Great work Anthony!

 

[Shelley]

Nice work Anthony. I would have removed the drop down menu but I'm designing editor icon replacements and need all the icons showing.

 

[Edrondol]

Wowzer! This is one GREAT addon! I can't wait until my wife gets a job so I can start donating again.

 

[Jo.]

Ok... to remove the smilie field from the editor you have to perform a file edit, being:

> js > tinymce > themes > xenforo > editor_template.js

Find and hide the following by wrapping PHP comments around it: /* code in here */

tinymce.create('tinymce.plugins.XenForoSmilies', {
        addButtons : function (theme, tb)
        {
            var smilies = theme.settings.xenforo_smilies,
                controlManager = theme.editor.controlManager,
                editor = theme.editor,
                button, DOM = tinymce.DOM;

            if (typeof smilies === 'undefined' || smilies.length === 0 || smilies === {})
            {
                return;
            }

            button = controlManager.createSplitButton('xenforo_smilies', {
                title : 'xenforo.smilies_desc',
                image : theme.settings.xenforo_smilies_menu_image,
                icons : false,
                onclick : function() { button.showMenu(); }
            });
            button.onRenderMenu.add(function(menubutton, menu)
            {
                tinymce.each(smilies, function(smilie, smilieName)
                {
                    menu.add({
                        title : '<img src="' + DOM.encode(smilie[1]) + '" /> ' + DOM.encode(smilie[0]),
                        onclick : function()
                        {
                            editor.execCommand('mceInsertContent', false,
                                '<img src="' + DOM.encode(smilie[1]) + '" alt="' + DOM.encode(smilieName) + '" class="smilie" data-smilie="yes" />'
                            );
                        }
                    });
                });

                // need this to run after the render has happend
                setTimeout(function()
                {
                    var menuNode = DOM.get('menu_' + menu.id);
                    if (menuNode)
                    {
                        $('.mceText[title]', menuNode).each(function()
                        {
                            $(this).attr('title', '');
                        });
                    }
                }, 50);
            });
            tb.add(button);
        },

        getInfo : function()
        {
            return {
                longname : 'XenForo Smilies',
                author : '',
                version : '1.0'
            };
        }
    });

Sorry to be utterly dense, but what does "> js > tinymce > themes > xenforo > editor_template.js" mean?

I can't find where this code is, to do this edit...

I'm dyslexic and I struggle to read code as it is, so would really appreciate some help!


inph, thanks for this awesome addon - we really appreciate it!!

 

[Paul B]

That is a file in the following directory: \community\js\tinymce\themes\xenforo

So you need to go to that directory on your server and locate the editor_template.js file and download it to your PC.
Edit it and re-upload it to your server.

It's the only file in the directory so you can't go wrong

Make sure you take a backup of the file first though...just in case.


* The \community directory will vary depending on where you installed the software; i.e. in the \forum directory, root, etc.

 

[Jo.]

ah okay, thanks so much Brogan! Stupid me - I was looking in templates hahaha!

 

[Perspektif]

thank you

 

[Peggy]

I look forward to seeing this add-on grow in features. Exciting stuff!

 

[Peggy]

I was working on adding smilies for most of the evening.... one... smiley... at... a... time... my... gawd... this.... is... s l o wwwwww.....

I'll sure be glad when Kier/Mike, or someone, makes a faster way for us to our smilies!

 

[Gustavo Fernandez]

GOOD JOB!

 

[ArnyVee]

I was working on adding smilies for most of the evening.... one... smiley... at... a... time... my... gawd... this.... is... s l o wwwwww.....

I'll sure be glad when Kier/Mike, or someone, makes a faster way for us to our smilies!

Peggy, I'm with you. It took me awhile to upload just like 10 of them. I can't wait for a bulk way to upload our beautiful smilies (and avatars someday too )

 

[Peggy]

I've looked in the templates for the add-on and can't find where to center the smilies in the tray.

Any help would be appreciated.

 

[Anthony Parsons]

If you want to center the smilies in the pop-down, then you want to add: text-align: center; to the #happyplace css

#happyplace
{
border: 1px solid #ccc;
border-top: none;
background: #f0f0ee;
padding: 5px 5px 10px 5px;
border-bottom-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomright: 6px; -khtml-border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomleft: 6px; -khtml-border-bottom-left-radius: 6px;
text-align: center;
}

 

[Peggy]

Excellent. Thank you Anthony!

 

[twhiting9275]

You can use SQL queries to populate the smilie table which is a lot quicker than manually entering the data in the ACP.

From what I can see, simply adding these via sql query

insert into xf_smilie VALUES(NULL, 'name','code','smileypath')

works to get them in the database, but it doesn't actually add them to the editor (this, or the original XF dropdown), but if you edit a smiley and save it, that will put all those inserts in. Odd? Or am I just missing something?

 

[Paul B]

From what I can see, simply adding these via sql query

insert into xf_smilie VALUES(NULL, 'name','code','smileypath')

works to get them in the database, but it doesn't actually add them to the editor (this, or the original XF dropdown), but if you edit a smiley and save it, that will put all those inserts in. Odd? Or am I just missing something?

Yes, that's correct.

Just populating the table doesn't make them appear.
There's a cache that needs to be rebuilt so editing the smilie will make it appear.

 

[twhiting9275]

hrrm, I ended up running all the cache's I could, oh well, least I know it wasn't something with the code itself.
For those who just can't wait to upload all your smilies at once, I've put out a very quick hack to allow this to be done here . It's as simple as editing a file, uploading your smileys and calling a file from your browser (oh, and you have to edit just one smiley to deal with the above problem). Not really an 'addon', but it makes the job much, much easier!