If you are using MyBB 1.6 first include jquery library in your headerinclude template (under the condition that you don't have it) (ACP -> templates and styles -> templates -> <your theme template set> -> ungrouped templates -> headerinclude) and at he bottom of that template paste
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
NOTE: Do this ONLY if you didn't included jquery before (to find out if you did just look at jquery reference in your headerinclude before pasting this).
In images folder create a file called more_smilies.js and paste the following content inside
jQuery(document).ready(function($) {
$("a[href*='openGetMoreSmilies']").click(function (e) {
e.preventDefault();
if($('.smilie_row').length == 0) {
$(this).parents("form[method*='post']").find(".messageEditor").parents("tr").after($("<tr class='smilie_row' style='display:none;'><td class='trow1' valign='top'><strong>More smilies:</td><td valign='vtop' class='trow1 smilie_box' id='clickable_smilies'>Loading smilies, please wait.</td></tr>"));
$(".smilie_box").load("misc.php?action=smilies&popup=true img", function () {
$("tr.smilie_row").show();
$(".smilie_box img").removeAttr("onclick").addClass("smilie").wrap('<span></span>');
});
} else {
}
});
$(document).ajaxComplete(function(){
$(".smilie_box img").click(function () {
var title = $(this).attr('title');
$.fn.extend({
insertAtCaret: function(myValue){
return this.each(function(i) {
if (document.selection) {
//For browsers like Internet Explorer
this.focus();
var sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
else if (this.selectionStart || this.selectionStart == '0') {
//For browsers like Firefox and Webkit based
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
}
});
$('textarea').insertAtCaret(title);
});
});
});
In ungrouped template set find codebuttons template and at the bottom of that template add
<script type="text/javascript" src="images/more_smilies.js"></script>
and in global.css that is used by your theme add
.smilie_box img {
display:inline-block;
vertical-align:middle;
margin:2px;
}
I've included more_smilies.js (along with a preview) in a attachment. More_smilies file contains "insert into textarea" function that i've found on StackOverflow long time ago (i'm not taking any credits for it).