<i class="uPostColor"></i>
<div class="uColor u1"></div>
<div class="uColor u2"></div>
<div class="uColor u3"></div>
<div class="uColor u4"></div>
<div class="uColor u5"></div>
<div class="uColor u6"></div>
<div class="uColor u7"></div>

<script>// Открываем Aa цвета для поста
$('.uPostColor').click(function() {
$('.uColor').slideToggle('slow');
$('#addcBut').click(); // Скрываем родную Кнопку отправить для замены отправки на Enter
});
// Выбираем Aa и меняем цвет поля
$('.uColor').click(function() {
$('#message').attr('class',$(this).attr('class')).removeClass('uColor');
});
// Отправить Aa по нажатию Enter
$("#message").bind("keydown",function(e) { if(e.keyCode == 13){
PoleAa = $(this).attr('class');
ColorAa = $(this).val();
if(typeof(PoleAa) === "undefined") {  
$('#addcBut').click().show(); // Отправить по Enter если нет Aa цвета
$("#message").val('');  
} else {
$(this).val('[Aa="uAdd '+PoleAa+'"]'+ColorAa+'[/Aa]');
$('#addcBut').click().show(); // Отправить по Enter если есть Aa цвет
$("#message").removeClass(PoleAa).val('');  
Aa(); // Выполняем функцию преобразования из BB в HTML
};
return false;
}});
function Aa() {
$('.cMessage').each(function(){  
$(this).html($(this).html().split('[Aa="').join('<div class="').split('"]').join('">').split('[/Aa]').join('</div>'));  
});  
}; Aa();</script>

.uColor {width: 20px;height: 20px;display: inline-block;border-radius: 50%;margin: 0px 5px;float:left; position: relative;
  top: 6px;}
.u1 {background: rgb(252, 216, 114);}
.u2 {background: linear-gradient(45deg, rgb(252, 216, 114) 0%, rgb(243, 83, 105) 100%);}
.u3 {background: rgb(243, 83, 105);}
.u4 {background: linear-gradient(45deg, rgb(102, 244, 133) 0%, rgb(23, 172, 255) 100%);}
.u5 {background: rgb(74, 144, 226);}
.u6 {background: linear-gradient(45deg, rgb(252, 54, 253) 0%, rgb(93, 63, 218) 100%);}
.u7 {background: rgb(95, 102, 115);}
.uColorAdd, .uColor {display:none}
.uAdd, .uAd {font-family: Helvetica, Arial, sans-serif;color: rgb(255, 255, 255);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2em;
  padding: 100px 27px;text-align: center;outline-style: none;}
i.uPostColor {
  background: url(//woobl.ru/itm/Aa.jpg) no-repeat center;background-size:contain;
  width: 25px;
  height: 25px;
  display: inline-block;
}