Готовое решение - Панель смайлов в форме быстрого ответа

Предлагаю готовое решение для показа панельки смайлов в форме быстрого ответа.
Проверено на phpBB3

Нужно добавить JS скрипт "smilebox" (название любое) который был бы доступен в темах:

Код:

$(function()
{
var txtArea = $('#textarea_content').detach();
$('<div  class="replycontainer"><div  class="dleftsmiles">
<iframe src="/smilies.forum?categ=0&mode=smilies_frame" width="100%" height="224" class="smilebox" style="visibility:hidden;" scrolling="no"></iframe>
</div><div id="replyarea"></div></div>').insertBefore($('#quick_reply div'));

$('#replyarea').append(txtArea);
txtArea.removeAttr( "style" );
$('div textarea').removeAttr( "style" );

$('.smilebox').load(function(){
$('.smilebox').contents().find('html body #smilies_header').hide();
$('.smilebox').removeAttr( "style" );
$('.smilebox').contents().find('html body').attr("style" ,"padding-top: 0;");

});
});

Замечания по коду:

1. Фрейм со смайлами создается невидимым. фрагмент
   style="visibility:hidden;"
   Затем после загрузки смайлов фрейм показывается
   $('.smilebox').removeAttr( "style" );
   
2. Также отключен скроллер. Если не нужно отключать - уберите фрагмент scrolling="no"
   
3. Прячется также выпадающий список с категориями смайлов:
   $('.smilebox').contents().find('html body #smilies_header').hide();
   
4. Если у вас несколько категорий смайлов и Вы хотите грузить какую-то конкретную, измените параметр categ=0  в
   URL фрейма src="/smilies.forum?categ=0&mode=smilies_frame"
   нумерация категорий производится от 0.
   

Также нужно подправить CSS. Дописав в конец следующие стили:

Код:

.replycontainer{
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

.dleftsmiles{
  width: 180px;
  float:left;
}

#replyarea{
  width: calc(100% - 180px);
  margin-left: 180px;
  text-align: center;
}
  
.smilebox{
  border: 1px solid #D9D9D9;
  border-radius: 5px;
}

#textarea_content div textarea {
  margin-top: 2px;
  min-height: 180px;
}

.smiley-element{
  text-align: center;
}

.smiley-element img{
  padding: 4px;
  margin: 0;
}

Ключевые здесь являются .replycontainer, .dleftsmiles, #replyarea. Остальные просто моё оформление.

Для отключения фрейма со смайлами, достаточно удалить или закомментировать скрипт.

Проверил на punBB - Работает.
Только если хотите скрыть выпадающий список с категориями смайлов нужно в скрипте заменить строку

Код:

$('.smilebox').contents().find('html body #smilies_header').hide();

на

Код:

$('.smilebox').contents().find('html body #smilies_categ').hide();